first, get the element (getting Elements)
1.ext.get
var el = ext.get (' Myelementid ');//get element, equal to document.getElementById (' Myelementid ');
2. Ext.fly
var el = ext.fly (' Myelementid ')/does not require caching.
Note: The Flyweight pattern is a memory-saving pattern, presumably based on creating a single object and then constantly using it repeatedly.
3.ext.getdom
var eldom = ext.getdom (' elId '); To search the DOM node based on ID
var elDom1 = Ext.getdom (eldom); To look up a DOM node based on a DOM node
Second, CSS elements
4.addClass
Ext.fly (' ElId '). addclass (' mycls '); Add the element's ' mycls ' style
5.radioClass
Ext.fly (' ElId '). Radioclass (' mycls ');//Add one or more classname to this element and remove the style of the same name 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 '); removing styles from
Ext.fly (' ElId '). Toggleclass (' mycls '); Add Style again
8.hasClass
if (Ext.fly (' elId '). Hasclass (' mycls ')) {//Determine if this style has been added
It has a style ...
}
10.replaceClass
Ext.fly (' ElId '). Replaceclass (' Myclsa ', ' myclsb ');//Replace style
11.getStyle
var color = ext.fly (' elId '). GetStyle (' color '); Returns the unified current style and calculation style for the element.
var zindx = ext.fly (' elId '). GetStyle (' Z-index '); Returns the unified current style and calculation style for 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 one object parameter.
13.getColor
Ext.fly (' ElId '). GetColor (' color ');//return CSS color for the specified CSS property
14.setOpacity
Ext.fly (' ElId '). SetOpacity (., true);//Set the transparency of the element.
15.clearOpacity
Ext.fly (' ElId '). Clearopacity ()//Clear transparency settings for this element
Iii. Dom Travels
16.ext.fly (' elId '). Select (' Li:nth-child (2n) '). addclass (' red ');
17.is tests whether the current element is consistent with the incoming selector.
Copy Code code as follows:
var el = ext.get (' elId ');
if (el.is (' p.mycls ')) {
Conditions set up
}
18.findParent
Locates on this node, starting with this node, and searching the perimeter for the outer parent node, the search condition must conform to and match the simple pass selector.
Ext.fly (' ElId '). Findparent (' div '); Return DOM node
Ext.fly (' ElId '). Findparent (' div ', 4); Find 4 nodes
Ext.fly (' ElId '). Findparent (' div ', null, true); Back to Ext.element
19.findParentNode
Locate the parent node of this node, starting with the parent node of this node, and searching the perimeter for the outer "parent" node, the search condition must conform to and match the simple pass selector.
Ext.fly (' ElId '). Findparentnode (' div ');
20.up
Along the DOM, search the outer "parent" node to the perimeter, and the search criteria must conform to and match the easy-to-pass selector.
Ext.fly (' ElId '). Up (' div ');
Ext.fly (' ElId '). Up (' div ', 5); Limited to 5-layer Search
21.select
Pass in a parameter of a CSS selector, and then follow the CSS selector from below the current element to form a collection of expected matching subnodes, which is the "select" Action, which is then returned as a combination element of the ext.compositeelement type. If the Ext.select () call represents a search from document.
Returns the compositeelement of the result
Ext.fly (' elId '). Select (' Div:nth-child (2) ');
Return 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 starting point of the query, or document if unspecified.
Returns an array of DOM nodes
Ext.query (' Div:nth-child (2) ');
23.child
Select a single child node, based on the feed selector, without limiting depth.
Ext.fly (' elId '). Child (' p.highlight '); The type returned is Ext.element
Ext.fly (' elId '). Child (' P.highlight ', true); Return DOM node
24.down
Based on the selector, direct selects a single child node.
Ext.fly (' ElId '). Down (' span '); The type returned is Ext.element
Ext.fly (' ElId '). Down (' span ', true); Return DOM node
25.parent
Returns the parent node of the current node, optionally sending a desired selector.
Returns the parent node, the type is ext.element
Ext.fly (' ElId '). parent ();
Returns the parent node, the type is the HTML DOM
Ext.fly (' ElId '). Parent ("", true);
Returns the parent node, but must be Div's, find it and return it, type is ext.element
Ext.fly (' ElId '). Parent ("div");
26.next
Gets the next side node and skips over the text node. Optionally, a desired selector can be sent.
Returns the next side node, the type is ext.element
Ext.fly (' ElId '). Next ();
Returns the next side node, the type is the HTML DOM
Ext.fly (' ElId '). Next ("", true);
Returns the next side node, but it must be Div's, 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, the type is HTML DOM
Ext.fly (' ElId '). Prev ("", true);
Returns the previous side node, but it must be Div's, find it and return it, 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, the type is ext.element
Ext.fly (' ElId ').
Returns the first side node, the type is the HTML DOM
Ext.fly (' ElId '). A ("", true);
Returns the first side node, but it must be div, find it and return it, type is ext.element
Ext.fly (' ElId '). ("Div");
29.last
Gets the last side node and skips over the text node. Optionally, a desired selector can be sent.
Returns the last side node, the type is ext.element
Ext.fly (' ElId '). Last ();
Returns the last side node, the type is the HTML DOM
Ext.fly (' ElId '). Last ("", true);
Returns the last side node, but it must be Div's, find it and return it, type is ext.element
Ext.fly (' ElId '). Last ("div");
DOM manipulation (a common task for DHTML is to add, delete, change, and check DOM elements)
30.appendChild
To classify the elements that are being fed into the child elements of this element.
var el = ext.get (' elId1 ');
Specify with ID
Ext.fly (' ElId '). appendchild (' elId2 ');
Ext.element add
Ext.fly (' ElId '). appendchild (EL);
To add a combination of selectors
Ext.fly (' ElId '). appendchild ([' ElId2 ', ' elId3 ']);
Add a DOM node 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 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 the argument of an element 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 in front inserts
Ext.fly (' ElId '). InsertBefore (EL);
33.insertAfter
Passes in the argument of an element and places it behind the current element.
var el = ext.get (' elId1 ');
The DOM node is inserted behind
Ext.fly (' ElId '). InsertAfter (' elId2 ');
Ext.element El is inserted in 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 ');
The inserted DOM node as the first element
Ext.fly (' ElId '). Insertfirst (' elId2 ');
Inserted ext.element as the first element
Ext.fly (' ElId '). Insertfirst (EL);
Creates a new node 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 '
});
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
Replaces this element with an incoming element. The parameter can be a new element or a Domhelper configuration item object to create.
var el = ext.get (' elId1 ');
Ext.fly (' ElId '). ReplaceWith (' elId2 '); ' ElId2 ' replaces ' elId '.
Ext.fly (' ElId '). ReplaceWith (EL); //
' ElId1 ' replaces ' elId '
Creates a new node with the Domhelper configuration item and replaces ' ElId ' with that node.
Ext.fly (' ElId '). ReplaceWith ({
Tag: ' P ',
CLS: ' Mycls ',
HTML: ' Hi I have replaced ElId '
});
v. Domhelper Configuration Items
37.createChild
Pass in an argument to a Domhelper configuration item object and create and add 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 to where the HTML to insert is placed in the element, you can specify Beforebegin, BeforeEnd, afterbegin, afterend these kinds. The second argument is inserting an HTML fragment, and the third parameter is a DOM object that determines whether to return a ext.element type.
Ext.fly (' ElId '). inserthtml (
' Beforebegin ',
' <p><a href= ' anotherpage.html ' > click me </a></p> '
); Return DOM node
Ext.fly (' ElId '). inserthtml (
' Beforebegin ',
' <p><a href= ' anotherpage.html ' > Click me </a></p> ',
True
); Back to Ext.element
39.remove
Remove the current element from the DOM and remove it from the cache ...
Ext.fly (' elId '). Remove (); //
Elid is not in the cache or DOM.
40.removeNode
Removes a DOM node from the document. If it is the body node, it will be ignored.
Ext.removenode (node); Remove from the DOM (HtmlElement)
Seven, 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"
}
});
Viii. Incident control event handling
43.addlistener/on
Add an event handler function for this element. On () is the shorthand method. Shorthand action is equivalent, write code 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, this 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 each browser, and as much as possible conforms to the standard methods of the consortium.
E It is not a standard event object, but 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 features
46. Commissioned delegation
To use event delegates instead, register an event handler on the container, and follow the logical choice of attachment:
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. Commissioned delegate
You can add this option when registering the processor of the event. An easy selector for filtering the target element, or for the descendants of the target to be looked down.
El.on (' click ', Function (e,t) {
Execute event specific process
}, this, {
For the offspring ' clickable ' effective
Delegate: '. Clickable '
});
48. Flip Hover
This is an example of Ext's Flip 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 event Handle Removealllisteners
All joined listeners are removed from the element.
El.removealllisteners ();
50. Whether to trigger single
You can add this option when registering the processor of the event. True represents a handler that adds a next removal itself after the event is triggered.
El.on (' click ', Function (e,t) {
Execute event specific process
}, this, {
Single:true//triggered once, no more events will be executed.
});
51. Buffering Buffer
You can add this option when registering the processor of the event. If you specify a number of milliseconds, the processing function is scheduled to be executed after the Ext.util.DelayedTask delay. If the event is triggered again in 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 events at one second intervals
});
52. Delay delay
You can add this option when registering the processor of the event. Establish the time when the processing function is delayed execution after triggering the event.
El.on (' click ', Function (e,t) {
Execute event specific process
}, this, {
Delay the event, start the timer after responding to the event (one second here)
delay:1000
});
53. Goal Target
You can add this option when registering the processor of the event. If you want to specify another target element, you can set it above this configuration item. This ensures that the element is encountered during the escalation phase of the event to perform this processing function.
Copy Code code as follows:
El.on (' click ', Function (e,t) {
Execute event specific process
}, this, {
Encounters the first ' div ' in it to trigger an event.
Target:el.up (' div ')
});
10. Size & Size
54.getHeight
Returns the offset (offset) height of the element.
var ht = ext.fly (' elId '). GetHeight ();
55.getWidth
Returns the offset (offset) width of the 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
can be T, L, R, B, or any combination. For example, parameters that pass in LR will get (l) EFT padding + (r) ight padding.
var padding = ext.fly (' elId '). Getpadding (' LR ');
60.clip
Save the current overflow (overflow) and then the overflow portion of the cropping element-use Unclip () to remove it.
Ext.fly (' ElId '). Clip ();
61.unclip
Returns the original cropped part (overflow) before calling clip ().
Ext.fly (' ElId '). Unclip ();
62.isBorderBox
Test the different CSS rules/browsers to determine if the element uses border Box.
if (Ext.isborderbox) {
//
}
11, 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 elements returned 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 elements returned 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 elements returned 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 elements returned 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 elements returned 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 elements returned false).
Ext.fly (' ElId '). SetXY ([20,10])
69.getOffsetsTo
Returns the distance between the current element and the Fed element. Both of these elements must be part of the DOM tree to have the correct page coordinates (Display:none or elements returns 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 y-coordinate of the top.
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 CSS styles 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 CSS styles 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 at the coordinates of the page. Elements must be part of the DOM tree to have page coordinates (Display:none or elements that are not joined will return FALSE if they are invalid).
Ext.fly (' ElId '). setlocation (15,32)
79.moveTo
Regardless of how this element is positioned, set its position at the coordinates of the page. Elements must be part of the DOM tree to have page coordinates (Display:none or elements that are not joined will return FALSE if they are invalid).
Ext.fly (' ElId '). MoveTo (12,17)
80.position
The position of the initialization element. The current element is set to relative (relative) positioning if the expected position is not passed in, but is not yet positioned.
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 do a snapshot (snapshot) before the update is executed, and then you can recover 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
The parameter that feeds into a page coordinates, translates it to the element's CSS left/top value.
{LEFT:TRANSLX, top:transly}
var points = ext.fly (' elId '). Translatepoints (15,18);
