ExtJS learning ------- Ext operations on Dom: Ext. get Ext. fly Ext. getDom, extjs ------- ext

ExtJS learning ------- Ext operations on Dom: Ext. get Ext. fly Ext. getDom, extjs ------- ext

Specific instance:

(1) create a JSP file, introduce CSS and js files, and add three divs

<% @ Page language = "java" import = "java. util. * "pageEncoding =" UTF-8 "%> <% String path = request. getContextPath (); String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path + "/"; %> <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> (2) Compile an Ext File


Ext. onReady (function () {// Ext. dom. element // Ext. get uses a caching mechanism to improve the efficiency of DOM nodes. Ext. element // get method Description:/*** 1 first go to Ext. search in the cache. If there is in the cache, you can directly return it. * 2 if there is no in the cache, go to the page to find it. If there is no in the page, return null * 3. If the page contains null, add the current content to the cache: {id: {data/events/dom} * 4 Ext. addCacheEntry method to add to cache */var d1 = Ext. get ('d1 '); // Ext. elementalert (d1.dom. innerHTML); // Ext. fly/*** fly: The javascript classic 'meta-mode' is used to improve efficiency, thus saving memory and reducing the size of carbon. * returned objects: Fly objects, of course, you can understand that Ext is encapsulated by Ext. element Object * Note: fly is only applicable to one operation because the metadata mode is used internally, thus saving memory */var d2 = Ext. fly ('d2 '); var d3 = Ext. fly ('d3 '); d2.dom. innerHTML = 'aaa'; d3.dom. innerHTML = 'bbb ';/* // note: the correct method should be var d2 = Ext. fly ('d2 '); d2.dom. innerHTML = 'aaa'; var d3 = Ext. fly ('d3 '); d3.dom. innerHTML = 'bbb '; * // Ext. getDom/*** get the DOM element of the element directly from the page */var dom = Ext. getDom ('d3 '); // HTMLElementdom. innerHTML = "CCCC ";});
(3) program running result

The result obtained by the get method.


Results of the fly Method
Result of the getDom Method








In ExtJS 321, how does Extget ("name") domvalue fail to be obtained? How can I disable Extget ("name") applyStyles?
The posted code is okay. I passed the test. It may be a problem in other aspects. My code
// Grid0220.js content

Var UI = function (){
 
Return {
Init: function (){
Ext. BLANK_IMAGE_URL = '../js/ext/resources/images/default/s.gif ';
Ext. QuickTips. init ();
InitTable ();
}
};

Function initTable (){
Var cm = new Ext. grid. ColumnModel ([
,
,
,
 
]);
Cm. defaultSortable = true;
// ArrayData
Var data = [
['1', 'male', 'name1', 'desc1'],
['2', 'male', 'name1', 'scn2 '],
['3', 'male', 'name3', 'desc3'],
['4', 'male', 'name4', 'scn4 '],
['5', 'male', 'name5', 'desc5']
];
// ArrayReader
Var ds = new Ext. data. Store ({
Proxy: new Ext. data. MemoryProxy (data ),
Reader: new Ext. data. ArrayReader ({},[
,
,
,
 
])
});
Ds. load ();

Var grid = new Ext. grid. GridPanel ({
El: 'grid ',
Ds: ds,
Cm: cm
});

Grid. render ();
}
}();

Ext. onReady (UI. init, UI );


Ext Problems
Ext contains several methods starting with get. These methods can be used to obtain the DOM in the document, obtain the components in the current document, and obtain the Ext element. Pay attention to the difference in usage.
1. get Method
The get method is used to obtain an Ext element, that is, the type is Ext. object of Element, Ext. the Element class is Ext's DOM encapsulation, which represents the DOM elements. You can create an Element object for each DOM, and you can use methods on the Element Object to perform operations specified on the DOM, for example, the hide method can hide elements and the initDD method can make the specified DOM have the drag-and-drop feature. The get method is short for Ext. Element. get.
The get method has only one parameter. this parameter is a hybrid parameter, which can be the id of a DOM node, an Element, or a DOM Node object. See the following sample code:
 
Ext. onReady (function (){
Var e = new Ext. Element ("hello ");
Alert (Ext. get ("hello "));
Alert (Ext. get (document. getElementById ("hello ")));
Alert (Ext. get (e ));
});
The Html page contains a div with the id of hello. The Code is as follows:
<Div id = "hello"> tttt </div>
 
Ext. get ("hello"), Ext. get (document. getElementById ("hello"), Ext. get (e) and other three methods can get an Ext element corresponding to the DOM node hello.
2. getCmp method-obtain the Ext component.
The getCmp method is used to obtain an Ext Component, that is, a Component or its subclass object initialized on the page. The getCmp method is in short form of the Ext. ComponentMgr. get method. The getCmp method has only one parameter, that is, the component id. For example, the following code:
 
Ext. onReady (function (){
Var h = new Ext. Panel ({
Id: "h2 ",
Title :"",
RenderTo: "hello ",
Width: 300,
Height: 200 });
Ext. getCmp ("h2"). setTitle ("New title ");
});
 
In the code, we use Ext. getCmp ("h2"). To obtain the component whose id is h2, and call its setTitle method to set the title of the Panel.
3. getDom method-Get DOM nodes
The getDom method can get the DOM nodes in the document. This method contains a parameter, which can be the id of the DOM node, the DOM Node object, or the Ext Element (Element) corresponding to the DOM node. For example, the following code:
 
Ext. onReady (function (){
Var e = new Ext. Element ("hello ");
Ext. getDom ("hello ");
Ext. getDom (e );
Ext. getDom (e. dom );
});
Html:
<Div id = "hello"> tttt </div>
 
In the above Code, Ext. getDom ("hello... the remaining full text>