Go ExtJS the difference between--html DOM, Ext element, and component

To learn and apply the EXT framework, it is necessary to understand the differences between Html DOM,ext Element , and Component .

Each HTML page has a hierarchical DOM tree model in which everything in the browser has a corresponding DOM object that dynamically alters the contents of the page by manipulating the DOM object implementation using a scripting language. ( usually using Getelementbyid/ext.getdom to get DOM objects)

Just having Dom is not enough, for example, to move a node in a page to another location, to add a shadow effect to a node, to hide or show a node, etc., we all need a few JavaScript to complete. Therefore, ext on the basis of the DOM, created the ext Element, you can use the Element to wrap any Dom,element object added a series of quick and easy practical methods. ( typically using ext.get to obtain an element object)

For end-users, just having element is not enough, such as a user to display a table, to display a tree, to display a pop-up window, and so on. Therefore, in addition to element, EXT also established a series of client interface components component, when we are programming, as long as the use of these components componet can achieve related data display and interaction, and component is a higher level of abstraction, Each component renders the render with the element and Dom in turn to produce the final page effect. ( usually use EXT.GETCMP to get component objects)

The difference between getdom, GET, getcmp in ext

The GetDOM method can get the DOM node in the document , which contains a parameter that can be the ID of the DOM node, the DOM node object, or the ext element (element) of the DOM node. (with getElementById is an effect)

JS Code

1. Ext.onready (function ()
2. {var e=new Ext.element ("Hello");
3. Ext.getdom ("Hello");
4. Ext.getdom (e);
5. Ext.getdom (E.dom);
6. });

The HTML page contains a DIV with an ID of Hello, the code is as follows: <div id= "Hello" >AAA</DIV>?

In the above code, three statements, such as Ext.getdom ("Hello"), Ext.getdom (E), Ext.getdom (E.dom), and so on, return all the same DOM node objects .

?

There is only one parameter in the get method , which is a mixed parameter, which can be the ID of the DOM node, an element, or a DOM node object. The Get method is actually a shorthand form of Ext.Element.get.

?

JS Code

1. Ext.onready (function () {
2. var e=New Ext.element ("Hello");?
3. Ext.get ("Hello"));
4. Ext.get (document.getElementById ("Hello"));
5. Ext.get (e);
6. });

The HTML page contains a DIV with an ID of Hello, the code is as follows: <div id= "Hello" >AAA</DIV>?

Three methods, such as Ext.get ("Hello"), Ext.get (document.getElementById ("Hello"), Ext.get (e), can get an EXT element corresponding to the DOM node Hello .

The getcmp method is used to obtain an EXT component , which is an object of component or its subclasses that have been initialized in the page, and there is only one parameter in the GETCMP method, which is the ID of the component. The getcmp method is actually a shorthand form of the Ext.ComponentMgr.get method.

JS Code

1. Ext.onready (function () {
2. var mypanel=New Ext.panel ({ID: "Myfirstpanel",? Title: "Old title ", Renderto: "Hello", width:300, height:200?});
3. EXT.GETCMP ("myfirstpanel"). Settitle ("new title");
4. });

The HTML page contains a DIV with an ID of Hello, with the following code: <div id= "Hello" >aaa</div>

We use EXT.GETCMP ("Myfirstpanel"). To get the component with ID Myfirstpanel and call its Settitle method to set the caption of the panel.

Dom additions and deletions

Ext.element occupies a large part of the Ext Core Library, where the method occupies the bulk of it. Therefore, we can divide these methods into the following categories:

Dom query or traversal (such as query, select, Findparent)

CSS (e.g. SetStyle, addclass)

Dom manipulation (e.g. createchild, remove)

Azimuth, dimensions (e.g. getheight, getwidth)

Dom query----ext.query and Ext.select

The role of Ext.query and Ext.select is to find one or more elements based on CSS selectors, basic xpath,html properties, and so on. The difference is on the return type. respectively:

The Query method returns a JavaScript-standard array type;
The Select method returns the Compositeelement type, which is compared:

JS Code

1. Alter (Ext.isarray (Ext.query (' A.bigclass '))); //true
2. Alter (Ext.query (' A.bigclass '). length); //The number of elements contained inside
4. Ext.select (' A.bigclass '). each (function (i) {
5. I.dom.href = ' javescript:void (0); ' //Find all a elements with Bigclass style to modify their links
6. });

The compositeelement type belongs to the Ext custom type, In a nutshell, a ext.element instance represents multiple elements in a collection, which implements all the interfaces on the element object, meaning that compositeelement is treated as a single element, regardless of the number of elements in the collection that is used to represent the element in ext.

Its usage is the same as a single element object. the results returned by the Select method can be manipulated directly as an element, and are generally more commonly used than the Query method.

Dom Query----Domquery detailed

Domquery is an HTML or XML document selector provided by Ext Core, which supports most CSS 3 selector rules while providing some customization.

There are 4 main ways to choose Domquery: element tag, element attribute, pseudo object, CSS value

1. There are 6 main ways to select the element tag:
(1) *: Select any element. See the code below for how to use it.
Ext.select (' * ');
(2) E: The element is marked E. See the code below for how to use it.
Ext.select (' div ');
(3) E F: Select the Mark F that is included in the Mark E. See the code below for how to use it.
Ext.select (' div a ');//Will select a element under Div
(4) E>f: Select the direct child tag F that is included in the tag E. See the code below for how to use it.
Ext.select (' div>a ');//will select Direct sub-element a under Div
(5) E+f: Select all element F immediately after element E. See the code below for how to use it.
Ext.select (' div+a ');//will select element a immediately below the DIV
(6) E~f: Select all the same element F immediately after the element E. See the code below for how to use it.
Ext.select (' div~a ');//will select the same level of element a immediately below the DIV

2. Through the element attribute selection, there are mainly the following 7 kinds of syntax.
(1) E[foo]: Select the element with the attribute foo. Use the syntax below to see the code below.
Ext.select (' div[id] ');//Select the DIV element with the id attribute
(2) E[foo=bar]: Select the attribute value of Foo as the element of bar. Use the syntax below to see the code below.
Ext.select (' input[checked=true] ');//Select an element with the Checked property value True
(3) E[foo^=bar]: Select the element whose property value of Foo starts with bar. Use the syntax below to see the code below.
Ext.select (' input[name^=form1] '); Select the element whose Name property value begins with Form1
(4) E[foo$=bar]: Select the element that has the property value of Foo to end with bar. Use the syntax below to see the code below.
Ext.select (' input[name$=form1] '); Select the Name property value to Form1 the end of the element
(5) E[foo*=bar]: Select the attribute value of Foo to contain the element of the string bar. Use the syntax below to see the code below.
Ext.select (' input[name*=form1] '); Select the Name property value that contains the elements of the string Form1
(6) e[foo%=2]: Select the attribute value of Foo to divide the element by 2. Use the syntax below to see the code below.
Ext.select (' input[value%=2] '); Select the value attribute to divide 2 elements
(7) E[foo!=bar]: Select the attribute value of Foo is not equal to the bar element. Use the syntax below to see the code below.
ext.select (' input[name!=form1] ');//select element with Name property value not equal to Form1

3. Through pseudo-object selection, there are the following 18 kinds of syntax.
(1) ext.select (' ul Li:first-child '); Select the first Li child node under all UL
(2) Ext.select (' ul Li:last-child '); Select the last Li child node under all UL
(3) Ext.select (' ul li:nth-child (2) '); Select 2nd Li Sub-node under all UL
(4) Ext.select (' ul li:nth-child (Odd) '); Select the odd line Li Sub-node under all UL
(5) Ext.select (' ul li:nth-child (Evan) '); Select even line Li sub-nodes under all UL
(6) Ext.select (' ul Li:only-child '); Select all LI nodes under UL with only one child node
(7) Ext.select (' input:checked ');//Select all elements with a value of true checked property
(8) Ext.select (' Input:first '); Select the first INPUT element
(9) Ext.select (' Input:last '); Select the last INPUT element
(x) E:nth (n): Select the matching nth (n≥1) element E. Use the syntax below to see the code below.
Ext.select (' Input:nth (2) '); Select a 2nd INPUT element
(one) E:odd: The shorthand for the grammar ": Nth-child (Odd)".
E:evan: A shorthand for the grammar ": Nth-child (Evan)".
(Ext.select) (' Div:contains (list) '); Select the innerHTML property that contains the div for "list"
(+) Ext.select (' Div:nodevalue (Test) '); Select a div with a text node and a value of "test"
(Ext.select) (' Input:not (: Checked) '); Select input that does not contain the checked attribute
(+) Ext.select (' Div:has (P) '); Select the div that contains P
(+) Ext.select (' Div:next (P) '); Select the next div in the same layer as the div containing P
(Ext.select) (' Div:prev (P) '); Select the next div in the same layer as the div containing P

4. Choose from CSS values. There are 6 main types of syntax.
(1) E:{display=none}: Select Element E with display value none. Use the syntax below to see the code below.
Ext.select (' Div:{display=none} '); Select element e for display value none
(2) Ext.select (' Div:{display^=none} '); Select the element with display value starting with none E
(3) Ext.select (' Div:{display$=none} '); Select the element with display value ending with none E
(4) Ext.select (' Div:{display*=none} '); Select the display value contains the element of the string none E
(5) Ext.select (' Div:{display%=none} '); Select element with display value divisible by 2 E
(6) Ext.select (' Div:{display!=none} '); Select element with display value not equal to none E

The syntax of domquery can be used alone or in combination, such as the following code:

Ext.select (' Div,span '); Select all DIV elements and span elements
Select Class as red and 1th child node with a div with the display property of None
Ext.select (' div.red:first-child[display=none] ');

If you do not specify the selector to start the root node of the search, the default is from the body node, which is equal to every time to do full-text search, its performance is conceivable, is quite inefficient, therefore, we recommend that each time you search the root node to specify the search, reduce the search scope. to set the syntax for the search root node, see the following code.

Ext.select (' div ', true, ' elId '); Elid is the root node ID

The following sentence is the same as the above effect

Ext.get (' Elid '). Select (' div ');

Manipulating CSS

Ext gives us a lot of ways to manipulate CSS.

AddClass easy to add a style to an element:

Ext.get (' ElId '). addclass (' mycls '); Adding elements to the ' mycls ' style

Radioclass adds one or more classname to this element and removes the same name style on all its side (siblings) nodes.

Ext.get (' ElId '). Radioclass (' mycls ');//Add ' mycls ' to the element remove ' mycls ' style on all side elements

Removeclass removes one or more CSS classes from an element.

Ext.get (' ElId '). Removeclass (' mycls '); To remove a style from an element

Toggleclass rotation (toggles, transitions to a state in both states)-Adds or removes the specified CSS class (deleted if it already exists, or new additions).

Ext.get (' ElId '). Toggleclass (' mycls '); Add (remove, then add) the style ext.get (' elId '). Toggleclass (' mycls ');

Hasclass checks if a CSS class is acting on this element.

If (Ext.get (' elId '). Hasclass (' Mycls ')} {alert (' is styled ');}

Replaceclass replaces the CSS class on this element.

Ext.get (' ElId '). Replaceclass (' Myclsa ', ' myclsb ');

GetStyle returns the uniform current style and calculation style for this element.

var color = ext.get (' elId '). GetStyle (' color ');
var zindx = ext.get (' elId '). GetStyle (' Z-index ');
var fntfmly = ext.get (' elId '). GetStyle (' font-family '); // ... Wait a minute

SetStyle set the style of an element, or you can include multiple styles with an object parameter.
Ext.get (' ElId '). SetStyle (' Color ', ' #FFFFFF ');
Ext.get (' ElId '). SetStyle (' Z-index ', 10);
Ext.get (' ElId '). SetStyle ({display: ' Block ', overflow: ' Hidden ', cursor: ' pointer '});
Ext.get (' ElId '). SetStyle (' Color ', ' #FFFFFF ', true); Animation-Animated transformation process
Ext.get (' ElId '). SetStyle (' Color ', ' #FFFFFF ', {duration:. 75}); With 0.75 second animation transformation process

GetColor returns the CSS color for the specified CSS property. RGB, three-bit numbers (like #fff) and valid values are converted to the standard six-bit hexadecimal color.
Ext.get (' ElId '). GetColor (' Background-color ');
Ext.get (' ElId '). GetColor (' color ');
Ext.get (' ElId '). GetColor (' Border-color '); // ... Wait a minute

SetOpacity sets the transparency of the element.
Ext.get (' ElId '). SetOpacity (. 5);
Ext.get (' ElId '). SetOpacity (., true); Animation
Ext.get (' ElId '). SetOpacity (., {duration:. 5}); The animation process with half a second attached
Clearopacity clears the transparency setting for this element.
Ext.get (' ElId '). clearopacity ();

Manipulating the DOM

AppendChild the element that is being fed into the element's child element.
var el = ext.get (' elId1 ');
Ext.get (' ElId '). appendchild (' elId2 '); ' ElId2 ' added to ' elId '
Ext.get (' ElId '). appendchild (EL); The parameters can also be: [' elId2 ', ' elId3 '],???? El.dom?? ,???? Ext.select (' div ')

Appendto adds this element to the element being fed.
Ext.get (' ElId '). AppendTo (' elId2 ');//' elId ' added to ' elId2 '

Replace replaces the incoming element with the current element.
Ext.get (' elId '). Replace (' elId2 '); ' ElId ' to replace ' elId2 '

ReplaceWith Replace this element with an incoming element
Ext.get (' ElId '). ReplaceWith (' elId2 '); ' ElId2 ' replaces ' elId '.

InsertBefore the argument passed in an element, placing it in the position before the current element
Ext.get (' ElId '). InsertBefore (' elId2 ');

Insertfirst can be either inserting an element or creating an element (if you want to create it, use the "Domhelper Configuration Item Object" as a parameter), which will appear as the first child element of the current element.
Ext.get (' ElId '). Insertfirst (EL);
Create a new node with a Domhelper configuration item
Ext.get (' ElId '). Insertfirst ({
Tag: ' P ',
CLS: ' Mycls ',
HTML: ' Hi I am The new first child '
});

Remove removes the current element from the DOM and removes it from the cache.
Ext.get (' elId '). Remove (); Elid is not in the cache or DOM.

Manipulating dom----domhepler configuration items

In the example above, you might notice this syntax:
. Insertfirst ({
Tag: ' P ',
HTML: ' Hi I am The new first child '
});
What is the function of that parameter of the Insertfirst method? Parameters are the decorative elements (HTML elements) to be created in the Domhelper, that is, domhelper configuration options, its configuration items support a lot of HTML attributes, HTML fragment also line, as for the HTML attribute can be a lot of DOM node properties (CSS class, URL, src, ID, etc.).

The Domhelper configuration is visible as the equivalent of any HTML element.

Domhelper is a utility designed to dynamically generate decorative elements, which solves the problem of differences between most browsers and avoids the hassle of primitive manipulation of DOM scripts. For HTML snippets and innerHTML operations, Domhelper is fully considered and has sufficient performance optimizations.

Ext.domhelper is a singleton, so you can invoke its static method without instantiating it:
Markup, inserthtml, InsertBefore, InsertAfter, Insertfirst, append, overwrite

Example 1:ext.domhelper.append (' My-div ', {tag:? ') UL ', CLS:? ' My-class '});
Example 2:ext.domhelper.insertfirst (' My-div ', ' <p>Hi</p> ');

Size & Size

An element on the page, we want to get to its size or change its size. Without a surprise, Ext core abstracts these tasks into a clear API for everyone to use. These are setter methods that can be passed into the animation's configuration parameters, or that is, a Boolean true, indicating
This is the default animation.
Ext.get (' ElId '). SetHeight ($, true); Set a height of 200px to animate with the default configuration

Set a height of 150px to animate with a custom configuration
Ext.get (' ElId '). SetHeight (150, {
Duration:. 5,//animation will last half a second
Callback:function () {this.update ("End");}//After the animation changes its contents to "End"
});

getheight//returns the offset (offset) height of the element.
getwidth//returns the offset (offset) width of the element.
setheight//sets the height of the element.
setwidth//sets the width of the element.
getborderwidth//returns the padding width of the specified edge (side (s)).
getpadding//can be T, L, R, B or any combination. Parameters passed into LR are leftpadding+right padding.
clip//Saves the current overflow (overflow) and then removes the overflow portion of the cropping element using Unclip ().
unclip//returns the original cropped portion (overflow) before calling clip ()

Positioning

The API defined by Ext core allows you to quickly capture all aspects of the location of an element, either as a get or set method, and all browsers are generic. Similar to the size of the previous section of the API, most setter methods support animation effects. You can pass in the configuration parameter of the animation in the second parameter (Object-literal configuration object), or it is true with a Boolean type,
Indicates that this is the default animation.

Set/getx
Set/gety
Set/getxy
set/getoffsetsto//returns the distance between the current element and the element being fed
var eloffsets = ext.get (' elId '). Getoffsetsto (Anotherel);
Set/getleft
Set/getright
Set/gettop
Set/getbottom
setlocation//regardless of how this element is positioned, set its position in the coordinates of the page.

clearpositioning//clears the location and resets to the default when the document is loaded

set/getpositioning//returns an object that contains CSS positioning information. Useful tips: Together with setpostioning
Together, you can make a snapshot (snapshot) before the update executes, and you can then restore the element

Go ExtJS the difference between--html DOM, Ext element, and component