ExtJs usage Summary (very detailed)

Source: Internet
Author: User
Tags getcolor gety

1. Getting Elements)
1. Ext. get
Var el = Ext. get ('myelementid'); // get the element, equivalent to document. getElementById ('myelementid'); // Cache
2. Ext. fly
Var el = Ext. fly ('myelementid') // No cache is required.
Note: The Flyweight Design Pattern mode is a memory-saving mode. The general principle of this mode is to create a single object and use it repeatedly.
3. Ext. getDom
Var elDom = Ext. getDom ('elid'); // query dom nodes by id
Var elDom1 = Ext. getDom (elDom); // query dom nodes based on dom nodes.

Ii. CSS Elements
4. addClass
Ext. fly ('elid'). addClass ('mycls'); // Add the 'mycls' style of the element
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'); // remove the element style
7. toggleClass
Ext. fly ('elid'). toggleClass ('mycls'); // Add a style
Ext. fly ('elid'). toggleClass ('mycls'); // remove a style
Ext. fly ('elid'). toggleClass ('mycls'); // Add the style
8. hasClass
If (Ext. fly ('elid'). hasClass ('mycls') {// determines if this style has been added
// There are styles ......
}
10. replaceClass
Ext. fly ('elid'). replaceClass ('myclsa ', 'myclsb'); // Replace the style
11. getStyle
Var color = Ext. fly ('elid'). getStyle ('color'); // returns the unified current style and computing style of the element.
Var zIndx = Ext. fly ('elid'). getStyle ('z-Index'); // return the unified current style and computing style of the element.
12. setStyle
Ext. fly ('elid'). setStyle ({
Display: 'block ',
Overflow: 'ddy ',
Cursor: 'pointer'
}); // Set the element style. You can also use an object parameter to include multiple styles.
13. getColor
Ext. fly ('elid'). getColor ('color'); // return the CSS color for the specified CSS attribute.
14. setOpacity

Ext. fly ('elid'). setOpacity (. 45, true); // you can specify the transparency of an element.
15. clearOpacity
Ext. fly ('elid'). clearOpacity (); // clear the transparency settings of this element

3. Dom travel
16. Ext. fly ('elid'). select ('li: nth-child (2n) '). addClass ('red ');
17. is to test whether the current element is consistent with the input selector.Copy codeThe Code is as follows: var el = Ext. get ('elid ');
If (el. is ('p. mycls ')){
// The condition is true.
}

18. findParent
Locate this node and use this node as the starting point to search for the parent node of the outer layer. The search conditions must meet and match the simple selection character passed in.
Ext. fly ('elid'). findParent ('div '); // return the dom Node
Ext. fly ('elid'). findParent ('div ', 4); // search for four nodes
Ext. fly ('elid'). findParent ('div ', null, true); // return Ext. Element
19. findParentNode
Locate the "parent node" of this node, and search for the outer "parent" node from this node's "parent node, the search condition must match and match the input simple selector.
Ext. fly ('elid'). findParentNode ('div ');
20. up
Search for the outer "parent" node along the DOM. The search condition must match and match the simple selection character passed in.
Ext. fly ('elid'). up ('div ');
Ext. fly ('elid'). up ('div ', 5); // within five layers
21. select
Input a CSS selector parameter, and then form a set of child nodes to be matched based on the CSS selector following the current element, that is, the "select" operation. compositeElement is returned in the form of CompositeElement. If you call Ext. select (), it indicates that the search is performed from the document.
// CompositeElement of the returned result
Ext. fly ('elid'). select ('div: nth-child (2 )');
// Returns an array.
Ext. fly ('elid'). select ('div: nth-child (2 )',
True );
// Search for the entire document
Ext. select ('div: nth-child (2 )');
22. query
Perform a query and return an array composed of DOM nodes. Optional, the second parameter is set as the query start point. If this parameter is not specified, the second parameter is set as the document.
// Returns an array composed of dom nodes.
Ext. query ('div: nth-child (2 )');
23. child
A single subnode is selected based on the input selection character without a limited depth.
Ext. fly ('elid'). child ('p. highlight'); // The returned type is Ext. Element.
Ext. fly ('elid'). child ('p. highlight', true); // return the dom Node
24. down
Based on this selection character, "direct" selects a single subnode.
Ext. fly ('elid'). down ('span '); // The returned type is Ext. Element.
Ext. fly ('elid'). down ('span ', true); // return the dom node.

25. parent
Returns the parent node of the current node. An optional selector is provided.
// Return the parent node. The type is Ext. Element.
Ext. fly ('elid'). parent ();
// Return the parent node. The type is html dom.
Ext. fly ('elid'). parent ("", true );
// Return the parent node, but it must be div. If it is found, it will be returned. The type is Ext. Element.
Ext. fly ('elid'). parent ("div ");
26. next
Get the next side node and skip the text node. Optional, You can input an expected selector.
// Return the next side node. The type is Ext. Element.
Ext. fly ('elid'). next ();
// Return the next side node. The type is html dom.
Ext. fly ('elid'). next ("", true );
// Return the next side node, but it must be div. If it is found, it will be returned. The type is Ext. Element.
Ext. fly ('elid'). next ("div ");
27. prev
Get the last side node and skip the text node. Optional, You can input an expected selector.
// Returns the last side node of the Ext. Element type.
Ext. fly ('elid'). prev ();
// Return the last side node. The type is html dom.
Ext. fly ('elid'). prev ("", true );
// Returns the last side node, but it must be div. If it is found, it will be returned. The type is Ext. Element.
Ext. fly ('elid'). prev ("div ");
28. first
Get the first side node and skip the text node. Optional, You can input an expected selector.
// Returns the first side node of the Ext. Element type.
Ext. fly ('elid'). first ();
// Return the first side node. The type is html dom.
Ext. fly ('elid'). first ("", true );
// Return the first side node, but it must be div. If it is found, it will be returned. The type is Ext. Element.
Ext. fly ('elid'). first ("div ");
29. last
Get the last side node and skip the text node. Optional, You can input an expected selector.
// Return the last side node. The type is Ext. Element.
Ext. fly ('elid'). last ();
// Return the last side node. The type is html dom.
Ext. fly ('elid'). last ("", true );
// Return the last side node, but it must be div. If it is found, it will be returned. The type is Ext. Element.
Ext. fly ('elid'). last ("div ");

Iv. DOM control (a common task of DHTML is to add, delete, modify, and query DOM elements)
30. appendChild
The child element of the input element.
Var el = Ext. get ('elid1 ');
// Specify with id
Ext. fly ('elid'). appendChild ('elid2 ');
// Ext. Element
Ext. fly ('elid'). appendChild (el );
// Add separators in combination
Ext. fly ('elid'). appendChild (['elid2', 'elid3 ']);
// Directly add a dom Node
Ext. fly ('elid'). appendChild (el. dom );
// Add CompositeElement, a group of div
Ext. fly ('elid'). appendChild (Ext. select ('div '));
31. appendTo
Add this element to the sent element.
Var el = Ext. get ('elid1 ');
// Add 'elid' to 'elid2'
Ext. fly ('elid'). appendTo ('elid2 ');
Ext. fly ('elid'). appendTo (el );//
Add to Ext. Element el
32. insertBefore
Input an element parameter and place it before the current element.
Var el = Ext. get ('elid1 ');
// Insert the dom node in front
Ext. fly ('elid'). insertBefore ('elid2 ');
// Ext. Element el is inserted before
Ext. fly ('elid'). insertBefore (el );
33. insertAfter
Input an element parameter and place it after the current element.
Var el = Ext. get ('elid1 ');
// Insert the dom node behind it
Ext. fly ('elid'). insertAfter ('elid2 ');
// Ext. Element el is inserted after
Ext. fly ('elid'). insertAfter (el );
34. insertFirst
You can insert an element or create an element (use the "DomHelper configuration item object" as the parameter for creation). In short, this element is the first child element of the current element.
Var el = Ext. get ('elid1 ');
// Insert the dom node as the first element
Ext. fly ('elid'). insertFirst ('elid2 ');
// Insert Ext. Element as the first Element
Ext. fly ('elid'). insertFirst (el );
// Create a new node using the DomHelper configuration item. The new node will be inserted as the first child element.
Ext. fly ('elid'). insertFirst ({
Tag: 'P ',
Cls: 'mycls ',
Html: 'Hi I am the new first child'
});
35. replace
Used to replace the input element with the current element.
Var el = Ext. get ('elid1 ');
// Replace 'elid2'
Ext. fly ('elid'). replace ('elid2 ');
// Replace 'elid1' with 'elid1'
Ext. fly ('elid'). replace (el );
36. replaceWith
Replace this element with the input 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'); // replace 'elid2' with 'elid '.
Ext. fly ('elid'). replaceWith (el );//
Replace 'elid1' with 'elid'
// Use the DomHelper configuration item to create a new node and replace it with the 'elid '.
Ext. fly ('elid'). replaceWith ({
Tag: 'P ',
Cls: 'mycls ',
Html: 'Hi I have replaced elid'
});

5. DomHelper configuration items
37. createChild
Input the parameter of a DomHelper configuration item object to create and add it to this 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 sub-element of el
El. createChild (dhConfig, el. first ());
38. wrap
Create a new element and wrap it out of the current element.
Ext. fly ('elid'). wrap (); // div with elId
// Use the newly created element to enclose the elId
Ext. fly ('elid'). wrap ({
Tag: 'P ',
Cls: 'mycls ',
Html: 'Hi I have replaced elid'
});

Vi. Html snippets
38. insertHtml
Insert an HTML clip to this element. As for where the html to be inserted is placed in the element, you can specify beforeBegin, beforeEnd, afterBegin, afterEnd. The second parameter is to insert an HTML clip, and the third parameter is to determine whether to return a DOM object of the Ext. Element type.
Ext. fly ('elid'). insertHtml (
'Beforebegin ',
'<P> <a href = "anotherpage.html'> click me </a> </p>'
); // Return the dom Node
Ext. fly ('elid'). insertHtml (
'Beforebegin ',
'<P> <a href = "anotherpage.html'> click me </a> </p> ',
True
); // Returns Ext. Element
39. remove
Remove the current element from the DOM and delete it from the cache ..
Ext. fly ('elid'). remove ();//
ElId does not exist in the cache or dom.
40. removeNode
Remove the DOM node of the document. If it is a body node, it will be ignored.
Ext. removeNode (node); // remove (HTMLElement) from the dom)

VII. Ajax
41. load
Directly access the Updater Ext. Updater. update () method (same parameter ). The parameters are the same as those of the Ext. Updater. update () method.
Ext. fly ('elid'). load ({url: 'serverside. php '})
42. getUpdater
Obtain the UpdateManager of this element.
Var updr = Ext. fly ('elid'). getUpdater ();
Updr. update ({
Url: 'http: // myserver.com/index.php ',
Params :{
Param1: "foo ",
Param2: "bar"
}
});

8. Event Handling
43. addListener/on
Add an event processing function to this element. On () is its short form. Shorthand is equivalent to writing code with less effort.
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 Ext. Element.
// Object pointer this also points to t
});
44. removeListener/un
Remove an event handler from this element. Un () is short for it.
Var el = Ext. get ('elid ');
El. un ('click', this. handlerFn );
// Or
El. removeListener ('click', this. handlerFn );
45. Ext. EventObject
EventObject presents such an event model that unifies browsers and tries its best to comply with W3C standard methods.
// 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 );

9. Advanced event Functions
46. Delegate delegation
Instead of using event delegation, register an event processor on the container and choose according to the attached logic:
Ext. fly ('actions'). on ('click, function (e, t ){
Switch (t. id ){
Case ''btn-edit ':
// Process specific events of specific elements
Break;
Case 'btn-delete ':
// Process specific events of specific elements
Break;
Case 'btn-cancel ':
// Process specific events of specific elements
Break;
}
});

47. Delegated delegate
You can add this configuration option when registering the event processor. A simple selection character used to filter the target element or find the child of the target at the next layer.
El. on ('click', function (e, t ){
// Process of executing the event
}, This ,{
// Valid for the descendant 'clickable'
Delegate: '. clickable'
});
48. Flip the 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. removeAllListeners
Remove all added listeners from this element.
El. removeAllListeners ();
50. Whether to trigger single at a time
You can add this configuration option when registering the event processor. True indicates that a processing function is added to the event after the event is triggered.
El. on ('click', function (e, t ){
// Process of executing the event
}, This ,{
Single: true // once triggered, the event will not be executed again
});
51. buffer
You can add this configuration option when registering the event processor. If a millisecond value is specified, the processing function is scheduled to be executed after Ext. util. DelayedTask is delayed. If the event is triggered again in that event, the original processor handle will not be enabled, but the new processor handle will be placed in its location.
El. on ('click', function (e, t ){
// Process of executing the event
}, This ,{
Buffer: 1000 // The interval between one second for repeated response events
});
52. Delayed delay
You can add this configuration option when registering the event processor. Specify the time for delayed function execution after the event is triggered.
El. on ('click', function (e, t ){
// Process of executing the event
}, This ,{
// Delay event. start timing after responding to the event (here one second)
Delay: 1000
});
53. target
You can add this configuration option when registering the event processor. If you want to specify another target element, you can set it on this configuration item. This ensures that the processing function is executed only when this element is encountered during the event reporting phase.Copy codeThe Code is as follows: el. on ('click', function (e, t ){
// Process of executing the event
}, This ,{
// The event will be triggered only when the first 'div 'is encountered.
Target: el. up ('div ')
});

10. Size & size
54. getHeight
Returns the offset height of an element.
Var ht = Ext. fly ('elid'). getHeight ();
55. getWidth
Returns the offset width of an element.
Var wd = Ext. fly ('elid'). getWidth ();
56. setHeight
Set the height of the element.
Ext. fly ('elid'). setHeight ();
57. setWidth
Set the width of the element.
Ext. fly ('elid'). setWidth ();
58. getBorderWidth
Returns the padding width of the specified side (s.
Var bdr_wd = Ext. fly ('elid'). getBorderWidth ('lr ');
59. getPadding
It can be t, l, r, B, or any combination. For example, the input lr parameter will get (l) eft padding + (r) ight padding.
Var padding = Ext. fly ('elid'). getPadding ('lr ');
60. clip
Save the current overflow, and then crop the overflow part of the element-use unclip () to remove it.
Ext. fly ('elid'). clip ();
61. unclip
The original cropping part (overflow) is returned before clip () is called ).
Ext. fly ('elid'). unclip ();
62. isBorderBox
Test different CSS rules/browsers to determine whether the element uses the Border Box.
If (Ext. isBorderBox ){
//
}

11. Positioning

63. getX
Returns the X position of the element relative to the page coordinate. The element must be a part of the DOM tree to have the correct page coordinate (display: none or elements not added return false ).
Var elX = Ext. fly ('elid'). getX ()
64. getY
Returns the Y position of the element relative to the page coordinate. The element must be a part of the DOM tree to have the correct page coordinate (display: none or elements not added return false ).
Var elY = Ext. fly ('elid'). getY ()
65. getXY
Returns the coordinates of the current page of the element. The element must be a part of the DOM tree to have the correct page coordinate (display: none or elements not added 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 coordinate. The element must be a part of the DOM tree to have the correct page coordinate (display: none or elements not added return false ).
Ext. fly ('elid'). setX (10)
67. setY
Returns the Y position of the element relative to the page coordinate. The element must be a part of the DOM tree to have the correct page coordinate (display: none or elements not added return false ).
Ext. fly ('elid'). setY (10)
68. setXY
Returns the coordinates of the current page of the element. The element must be a part of the DOM tree to have the correct page coordinate (display: none or elements not added return false ).
Ext. fly ('elid'). setXY ([20, 10])
69. getOffsetsTo
Returns the distance between the current element and the sent element. Both elements must be part of the DOM tree to have the correct page coordinate (display: none or elements not added return false ).
Var elOffsets = Ext. fly ('elid'). getOffsetsTo (anotherEl );
70. getLeft
Returns the X coordinate on the left.
Var elLeft = Ext. fly ('elid'). getLeft ();
71. getRight
Obtain the X coordinate on the right of an element (element X Position + element width ).
Var elRight = Ext. fly ('elid'). getRight ();
72. getTop
Obtain the Y coordinate at the top.
Var elTop = Ext. fly ('elid'). getTop ();
73. getBottom
Obtain the Y coordinate at the bottom of an element (element Y position + element width ).
Var elBottom = Ext. fly ('elid'). getBottom ();
74. setLeft
Use the CSS style (instead of setX () to set the left position of the element.
Ext. fly ('elid'). setLeft (25)
75. setRight
Set the style of the element CSS Right.
Ext. fly ('elid'). setRight (15)
76. setTop
Use the CSS style (instead of setY () to set the top position of the element.
Ext. fly ('elid'). setTop (12)
77. setBottom
Set the style of the element CSS Bottom.
Ext. fly ('elid'). setBottom (15)
78. setLocation
Regardless of how the element is located, set its Coordinate Position on the page. The element must be a part of the DOM tree to have page coordinates (display: none or elements not added will be treated as invalid and false will be returned ).
Ext. fly ('elid'). setLocation (15,32)
79. moveTo
Regardless of how the element is located, set its Coordinate Position on the page. The element must be a part of the DOM tree to have page coordinates (display: none or elements not added will be treated as invalid and false will be returned ).
Ext. fly ('elid'). moveTo (12,17)
80. position
The position of the initialization element. If you do not specify the expected position, the current element is set to relative.
Ext. fly ('elid'). position ("relative ")
81. clearPositioning
After the document is loaded, clear the location and reset it to the default value.
Ext. fly ('elid'). clearPositioning ()
Ext. fly ('elid'). clearPositioning ("top ")
82. getPositioning
Returns an object that contains the CSS positioning information. Useful Tips: together with setPostioning, you can create a snapshot before the update is executed, and then restore the element.
Var pos = Ext. fly ('elid'). getPositioning ()
83. setPositioning
Locate the object returned by getPositioning.
Ext. fly ('elid'). setPositioning ({
Left: 'static ',
Right: 'auto'
})
84. translatePoints
Input a page coordinate parameter and translate it to the CSS left/top value of the element.
// {Left: translX, top: translY}
Var points = Ext. fly ('elid'). translatePoints (15, 18 );

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.