Ext-js User Guide (summary)

First, get the element (Getting Elements)
1.ext.get
var el = ext.get (' Myelementid ');//Gets the element, equivalent to document.getElementById (' Myelementid ');//Caches
2. Ext.fly
var el = ext.fly (' Myelementid ')//does not require caching.
Note: The enjoy meta-mode (Flyweight Design pattern) is a memory-saving mode in which the approximate principle is to create a single whole object and use it repeatedly.
3.ext.getdom
var eldom = ext.getdom (' elId '); Check DOM nodes by ID
var elDom1 = Ext.getdom (eldom); To check DOM nodes based on DOM nodes

Second, CSS elements
4.addClass
Ext.fly (' ElId '). addclass (' mycls '); Adding elements to the ' mycls ' style
5.radioClass
Ext.fly (' ElId '). Radioclass (' mycls ');//Add one or more classname to this element and remove the same name style on all its side (siblings) nodes.
6.removeClass
Ext.fly (' ElId '). Removeclass (' mycls '); To remove a style from an element
7.toggleClass
Ext.fly (' ElId '). Toggleclass (' mycls '); Add Style
Ext.fly (' ElId '). Toggleclass (' mycls '); Remove Style
Ext.fly (' ElId '). Toggleclass (' mycls '); Add Style again
8.hasClass
if (Ext.fly (' elId '). Hasclass (' mycls ')) {//Determine if this style has been added
It's a style ...
}
10.replaceClass
Ext.fly (' ElId '). Replaceclass (' Myclsa ', ' myclsb ');//Replace style
11.getStyle
var color = ext.fly (' elId '). GetStyle (' color ');//Returns the uniform current style and calculation style of the element.
var zindx = ext.fly (' elId '). GetStyle (' Z-index ');//Returns the uniform current style and calculation style of the element.
12.setStyle
Ext.fly (' ElId '). SetStyle ({
Display: ' Block ',
Overflow: ' Hidden ',
Cursor: ' pointer '
});//Set the style of the element, or you can include multiple styles with an object parameter.
13.getColor
Ext.fly (' ElId '). GetColor (' color ');//return CSS color for the specified CSS property
14.setOpacity

Ext.fly (' ElId '). SetOpacity (. N, true);//sets the transparency of the element.
15.clearOpacity
Ext.fly (' ElId '). clearopacity ();//clear the transparency setting for this element


Third, Dom travels
16.ext.fly (' elId '). Select (' Li:nth-child (2n) '). addclass (' red ');
17.is tests whether the current element matches the incoming selector.

Copy the code code as follows:

var el = ext.get (' elId ');
if (el.is (' p.mycls ')) {
Conditions established
}

18.findParent
Positioned at this node, the node is the starting point, the outer parent node is searched to the perimeter, and the search criteria must conform and match the incoming simple selector.
Ext.fly (' ElId '). Findparent (' div '); Returns the DOM node
Ext.fly (' ElId '). Findparent (' div ', 4); Find 4 nodes
Ext.fly (' ElId '). Findparent (' div ', null, true); Back to Ext.element
19.findParentNode
Located at the parent node of this node, the parent node of this node is the starting point, and the parent parent node of the outer layer is searched to the perimeter, and the search criteria must conform and match the incoming simple selector.
Ext.fly (' ElId '). Findparentnode (' div ');
20.up
Along the DOM, the outer parent node is searched to the perimeter, and the search criteria must conform and match the incoming simple selector.
Ext.fly (' ElId '). Up (' div ');
Ext.fly (' ElId '). Up (' div ', 5); Within 5 levels of search
21.select
Pass in the parameters of a CSS selector and then, based on the CSS selector, form a collection of expected matching subnodes, that is, the "select" operation, and finally return as a combined element of a ext.compositeelement type, from below the current element. If the Ext.select () call represents a search from document.
Returns the compositeelement of the result
Ext.fly (' elId '). Select (' Div:nth-child (2) ');
Returns an array
Ext.fly (' elId '). Select (' Div:nth-child (2) ',
true);
The entire document will be searched
Ext.select (' Div:nth-child (2) ');
22.query
Queries that make a query that returns an array of DOM nodes. Optionally, the second parameter is set to the start of the query, or document if it is not specified.
Returns an array of DOM nodes
Ext.query (' Div:nth-child (2) ');
23.child
A single child node is selected based on the feed selector, which does not limit the depth of the search and matches the words.
Ext.fly (' elId '). Child (' p.highlight '); The returned type is Ext.element
Ext.fly (' elId '). Child (' P.highlight ', true); Returns the DOM node
24.down
Based on the selector, direct selects a single child node.
Ext.fly (' ElId '). Down (' span '); The returned type is Ext.element
Ext.fly (' ElId '). Down (' span ', true); Returns the DOM node

25.parent
Returns the parent node of the current node, optionally to a desired selector.
Returns the parent node, the type is ext.element
Ext.fly (' ElId '). parent ();
Return parent node, type is HTML DOM
Ext.fly (' ElId '). Parent ("", true);
Returns the parent node, but it must be Div's, find it and return it, the type is ext.element
Ext.fly (' ElId '). Parent ("div");
26.next
Gets the next edge node, skipping the text node. Optionally, a desired selector can be sent.
Returns the next side node, type ext.element
Ext.fly (' ElId '). Next ();
Returns the next side node, type is HTML DOM
Ext.fly (' ElId '). Next ("", true);
Returns the next side node, but must be div, find it and return it, type is ext.element
Ext.fly (' ElId '). Next ("div");
27.prev
Gets the previous side node and skips over the text node. Optionally, a desired selector can be sent.
Returns the previous side node, type ext.element
Ext.fly (' ElId '). Prev ();
Returns the previous side node, type is HTML DOM
Ext.fly (' ElId '). Prev ("", true);
Return to the previous side node, but must be div, find it, return, type is ext.element
Ext.fly (' ElId '). Prev ("div");
28.first
Gets the first side node and skips over the text node. Optionally, a desired selector can be sent.
Returns the first side node, type ext.element
Ext.fly (' ElId '). First ();
Returns the first side node, type is HTML DOM
Ext.fly (' ElId '). First ("", true);
Returns the first side node, but it must be Div's, find it and return it, type is ext.element
Ext.fly (' ElId '). First ("Div");
29.last
Gets the last side node, skipping the text node. Optionally, a desired selector can be sent.
Returns the last side node, type ext.element
Ext.fly (' ElId '). Last ();
Returns the last side node, type is HTML DOM
Ext.fly (' ElId '). Last ("", true);
Returns the last side node, but must be div, find it and return it, type is ext.element
Ext.fly (' ElId '). Last ("div");

Iv. DOM manipulation (a common task for DHTML is to add, delete, change, and check DOM elements)
30.appendChild
The elements that are fed into this element are grouped into child elements.
var el = ext.get (' elId1 ');
Specify with ID
Ext.fly (' ElId '). appendchild (' elId2 ');
Ext.element add
Ext.fly (' ElId '). appendchild (EL);
Combination of selectors to add
Ext.fly (' ElId '). appendchild ([' ElId2 ', ' elId3 ']);
Adding DOM nodes directly
Ext.fly (' ElId '). appendchild (El.dom);
Add Compositeelement, a set of Div
Ext.fly (' ElId '). AppendChild (Ext.select (' div '));
31.appendTo
Add this element to the element that is being fed.
var el = ext.get (' elId1 ');
' ElId ' added to ' elId2 '
Ext.fly (' ElId '). AppendTo (' elId2 ');
Ext.fly (' ElId '). AppendTo (EL); //
Add to Ext.element El
32.insertBefore
Passes in an element's argument and places it before the current element.
var el = ext.get (' elId1 ');
DOM node inserted in front
Ext.fly (' ElId '). InsertBefore (' elId2 ');
Ext.element El inserted in front
Ext.fly (' ElId '). InsertBefore (EL);
33.insertAfter
Passes in an element's argument and places it after the current element.
var el = ext.get (' elId1 ');
The DOM node is inserted later
Ext.fly (' ElId '). InsertAfter (' elId2 ');
Ext.element El inserted at the back
Ext.fly (' ElId '). InsertAfter (EL);
34.insertFirst
You can either insert an element or create an element (use the Domhelper configuration item object as a parameter to create it), in short, this element appears as the first child element of the current element.
var el = ext.get (' elId1 ');
Inserted DOM node as the first element
Ext.fly (' ElId '). Insertfirst (' elId2 ');
Insert ext.element as the first element
Ext.fly (' ElId '). Insertfirst (EL);
A new node is created with the Domhelper configuration item, and the new node is inserted as the first child element.
Ext.fly (' ElId '). Insertfirst ({
Tag: ' P ',
CLS: ' Mycls ',
HTML: ' Hi I am The new first child '
});
35.replace
For the current element to replace the incoming element.
var el = ext.get (' elId1 ');
' ElId ' to replace ' elId2 '
Ext.fly (' elId '). Replace (' elId2 ');
' ElId ' to replace ' elId1 '
Ext.fly (' elId '). Replace (EL);
36.replaceWith
Replace this element with the passed in element. The parameter can be a new element or a Domhelper configuration item object to be created.
var el = ext.get (' elId1 ');
Ext.fly (' ElId '). ReplaceWith (' elId2 '); ' ElId2 ' replaces ' elId '.
Ext.fly (' ElId '). ReplaceWith (EL); //
' ElId1 ' replace ' elId '
Create a new node with the Domhelper configuration item and replace ' ElId ' with that node.
Ext.fly (' ElId '). ReplaceWith ({
Tag: ' P ',
CLS: ' Mycls ',
HTML: ' Hi I have replaced ElId '
});


V. Domhelper Configuration Items
37.createChild
Passes in a parameter of a Domhelper configuration item object, creates it, and joins it to the element.
var el = ext.get (' elId ');
var dhconfig = {
Tag: ' P ',
CLS: ' Mycls ',
HTML: ' Hi I have replaced ElId '
};
Create a new node and put it in ' elId '
El.createchild (Dhconfig);
Create a new node before the first child element in El
El.createchild (Dhconfig, El.first ());
38.wrap
Creates a new element that wraps outside the current element.
Ext.fly (' elId '). Wrap (); Div wrapped with Elid
With a new element to wrap the elid.
Ext.fly (' elId '). Wrap ({
Tag: ' P ',
CLS: ' Mycls ',
HTML: ' Hi I have replaced ElId '
});

Vi. Snippets of HTML
38.insertHtml
Inserts an HTML fragment into this element. As for where the HTML to insert is placed on the element, you can specify Beforebegin, BeforeEnd, Afterbegin, Afterend. The second argument is to insert the HTML fragment, and the third parameter is to decide whether to return a DOM object of type Ext.element.
Ext.fly (' ElId '). inserthtml (
' Beforebegin ',
' <p><a href= ' anotherpage.html ' > click on Me </a></p> '
); Returns the DOM node
Ext.fly (' ElId '). inserthtml (
' Beforebegin ',
' <p><a href= ' anotherpage.html ' > click on Me </a></p> ',
True
); Back to Ext.element
39.remove
Removes the current element from the DOM and removes it from the cache.
Ext.fly (' elId '). Remove (); //
Elid is not in the cache or DOM.
40.removeNode
Removes the DOM node from document. If it is a body node, it will be ignored.
Ext.removenode (node); Remove from Dom (HtmlElement)


Vii. Ajax
41.load
Direct access to Updater's Ext.Updater.update () method (same parameter). The parameters are consistent with the Ext.Updater.update () method.
Ext.fly (' elId '). Load ({URL: ' serverside.php '})
42.getUpdater
Gets the updatemanager of this element.
var updr = ext.fly (' elId '). Getupdater ();
Updr.update ({
URL: ' http://myserver.com/index.php ',
Params: {
param1: "foo",
Param2: "Bar"
}
});

Incident control Event handling
43.addlistener/on
Add an event handler for this element. On () is the shorthand method. Shorthand is equivalent, and writing code is more labor-saving.
var el = ext.get (' elId ');
El.on (' click ', Function (e,t) {
E is a standardized event object (Ext.eventobject)
T is the target element of the click, which is a ext.element.
Object pointer This also points to T
});
44.removelistener/un
Removes an event handler function from this element. Un () is its shorthand.
var el = ext.get (' elId ');
el.un (' click ', THIS.HANDLERFN);
Or
El.removelistener (' click ', THIS.HANDLERFN);
45.ext.eventobject
EventObject presents an event model that unifies browsers, and tries to conform to the standard method.
E It is not a standard event object, but a ext.eventobject.
function Handleclick (e) {
E.preventdefault ();
var target = E.gettarget ();
...
}
var mydiv = ext.get (' mydiv ');
Mydiv.on ("click", Handleclick);
Or
Ext.EventManager.on (' Mydiv ', ' click ', Handleclick);
Ext.EventManager.addListener (' Mydiv ', ' click ', Handleclick);

Ix. Advanced Event function
46. Entrusted delegation
To use an event delegate instead, register an event handler on the container and choose according to the logic of dependency:
Ext.fly (' actions '). On (' Click, Function (e,t) {
Switch (t.id) {
Case ' Btn-edit ':
Handling event-specific procedures for specific elements
Break
Case ' Btn-delete ':
Handling event-specific procedures for specific elements
Break
Case ' Btn-cancel ':
Handling event-specific procedures for specific elements
Break
}
});

47. Entrust Delegate
You can add configuration to this option when registering the event's processor. A simple selector for filtering the target element, or the next level to find the descendants of the target.
El.on (' click ', Function (e,t) {
Execute event specific process
}, this, {
Effective for descendants ' clickable '
Delegate: '. Clickable '
});
48. Flip Hover
This is an example of an EXT rollover menu:
Handles when the mouse enters the element
function Enter (e,t) {
T.toggleclass (' Red ');
}
Handles when the mouse leaves the element
function Leave (e,t) {
T.toggleclass (' Red ');
}
Subscribe to the hover
El.hover (over, out);
49. Remove the event handle removealllisteners
Removes all joined listeners on the element.
El.removealllisteners ();
50. Whether to trigger single at once
You can add configuration to this option when registering the event's processor. True means adding a handler for the next removal of the event after it is triggered.
El.on (' click ', Function (e,t) {
Execute event specific process
}, this, {
Single:true//triggered once and no more events are executed
});
51. Buffered Buffer
You can add configuration to this option when registering the event's processor. Specifying a number of milliseconds will schedule the handler to be executed after the Ext.util.DelayedTask delay. If the event fires again at that event, the original processor handle will not be enabled, but the new processor handle will be arranged in its place.
El.on (' click ', Function (e,t) {
Execute event specific process
}, this, {
buffer:1000//Repeat response event with one second for time interval
});
52. Delayed delay
You can add configuration to this option when registering the event's processor. Set the time that the handler function delays execution after the triggering event.
El.on (' click ', Function (e,t) {
Execute event specific process
}, this, {
Delay event, start timing after response event (here one second)
delay:1000
});
53. Goal Target
You can add configuration to this option when registering the event's processor. If you want to specify another target element, you can set it on this configuration item. This guarantees that the element will be encountered in the event escalation phase to execute this handler function.

Copy the code code as follows:

El.on (' click ', Function (e,t) {
Execute event specific process
}, this, {
The first ' div ' in the inside will trigger the event.
Target:el.up (' div ')
});

X. Size & Size
54.getHeight
Returns the offset of the element (offset) height.
var ht = ext.fly (' elId '). GetHeight ();
55.getWidth
The offset (offset) width of the returned element.
var wd = ext.fly (' elId '). GetWidth ();
56.setHeight
Sets the height of the element.
Ext.fly (' ElId '). SetHeight ();
57.setWidth
Sets the width of the element.
Ext.fly (' ElId '). SetWidth ();
58.getBorderWidth
Returns the padding width of the specified edge (side (s)).
var bdr_wd = ext.fly (' elId '). Getborderwidth (' LR ');
59.getPadding
It can be T, L, R, B or any combination. For example, parameters passed into LR get (l) EFT padding + (r) ight padding.
var padding = ext.fly (' elId '). Getpadding (' LR ');
60.clip
Saves the current overflow (overflow) and then trims the overflow portion of the element-using Unclip () to remove it.
Ext.fly (' ElId '). Clip ();
61.unclip
Returns the original cropped portion (overflow) before the clip () is called.
Ext.fly (' ElId '). Unclip ();
62.isBorderBox
Test the different CSS rules/browsers to determine if the element uses border Box.
if (Ext.isborderbox) {
//
}

Xi. positioning

63.getX
Returns the x position of the element relative to the page coordinates. The element must be part of the DOM tree to have the correct page coordinates (Display:none or non-joined elements return false).
var ElX = ext.fly (' elId '). GetX ()
64.getY
Returns the y position of the element relative to the page coordinates. The element must be part of the DOM tree to have the correct page coordinates (Display:none or non-joined elements return false).
var ElY = ext.fly (' elId '). GetY ()
65.getXY
Returns the position of the element's current page coordinates. The element must be part of the DOM tree to have the correct page coordinates (Display:none or non-joined elements return false).
var elxy = ext.fly (' elId '). GETXY ()//ELXY is an array
66.setX
Returns the x position of the element relative to the page coordinates. The element must be part of the DOM tree to have the correct page coordinates (Display:none or non-joined elements return false).
Ext.fly (' ElId '). SetX (10)
67.setY
Returns the y position of the element relative to the page coordinates. The element must be part of the DOM tree to have the correct page coordinates (Display:none or non-joined elements return false).
Ext.fly (' ElId '). Sety (10)
68.setXY
Returns the position of the element's current page coordinates. The element must be part of the DOM tree to have the correct page coordinates (Display:none or non-joined elements return false).
Ext.fly (' ElId '). SETXY ([20,10])
69.getOffsetsTo
Returns the distance from the current element to the element being fed. Both elements must be part of the DOM tree to have the correct page coordinates (Display:none or non-joined elements return false).
var eloffsets = ext.fly (' elId '). Getoffsetsto (Anotherel);
70.getLeft
Gets the x-coordinate of the left.
var elleft = ext.fly (' elId '). GetLeft ();
71.getRight
Gets the x-coordinate (element x position + element width) to the right of the element.
var elright = ext.fly (' elId '). GetRight ();
72.getTop
Gets the top y-coordinate.
var eltop = ext.fly (' elId '). GetTop ();
73.getBottom
Gets the bottom y-coordinate of the element (element y position + element width).
var elbottom = ext.fly (' elId '). Getbottom ();
74.setLeft
Use the CSS style directly (instead of SETX ()) to set the left position of the element.
Ext.fly (' ElId '). Setleft (25)
75.setRight
Sets the style of the element CSS right.
Ext.fly (' ElId '). Setright (15)
76.setTop
Use the CSS style directly (instead of sety ()) to set the top position of the element.
Ext.fly (' ElId '). Settop (12)
77.setBottom
Sets the style of the element CSS bottom.
Ext.fly (' ElId '). Setbottom (15)
78.setLocation
Regardless of how this element is positioned, set its position in the coordinates of the page. The element must be part of the DOM tree to have page coordinates (Display:none or non-joined elements are considered invalid and return false).
Ext.fly (' ElId '). setlocation (15,32)
79.moveTo
Regardless of how this element is positioned, set its position in the coordinates of the page. The element must be part of the DOM tree to have page coordinates (Display:none or non-joined elements are considered invalid and return false).
Ext.fly (' ElId '). MoveTo (12,17)
80.position
The location of the initialization element. If you do not pass in the desired position and you are not positioned, the current element will be set to the relative (relative) position.
Ext.fly (' elId '). Position ("relative")
81.clearPositioning
Clears the location and resets to default when the document is loaded.
Ext.fly (' ElId '). Clearpositioning ()
Ext.fly (' ElId '). Clearpositioning ("Top")
82.getPositioning
Returns an object that contains CSS positioning information. Useful tip: Together with setpostioning, you can make a snapshot (snapshot) before the update executes, and then restore the element.
var pos = ext.fly (' elId '). Getpositioning ()
83.setPositioning
The object returned by Getpositioning () is positioned.
Ext.fly (' ElId '). Setpositioning ({
Left: ' Static ',
Right: ' Auto '
})
84.translatePoints
Feeds a page coordinate parameter, translating it to the element's CSS left/top value.
{LEFT:TRANSLX, top:transly}
var points = ext.fly (' elId '). Translatepoints (15,18);

Ext-js User Guide (summary)