ExtJs usage summary (very detailed)_extjs

1. Getting Elements
1.Ext.get
var el = Ext.get('myElementId');//Getting elements, equivalent to document.getElementById('myElementId ');//Will be cached
2. Ext.fly
var el = Ext.fly('myElementId')//No need to cache.
Note: Flyweight Design Pattern is a memory-saving pattern. The general principle of this pattern is to create a single overall object and then use it repeatedly.
3.Ext.getDom
var elDom = Ext.getDom('elId'); // Check the dom node based on the id
var elDom1 = Ext.getDom(elDom); // Check the dom node based on the id Check dom node

2. CSS elements
4.addClass
Ext.fly('elId').addClass('myCls'); // Add element's myCls' style
5.radioClass
Ext.fly('elId').radioClass('myCls');//Add one or more classNames to this element and remove all its sides (siblings ) style on the node with the same name.
6.removeClass
Ext.fly('elId').removeClass('myCls'); // Remove the style of the element
7.toggleClass
Ext.fly('elId'). toggleClass('myCls'); // Add style
Ext.fly('elId').toggleClass('myCls'); // Remove style
Ext.fly('elId').toggleClass(' myCls'); //Add the style
8.hasClass
if (Ext.fly('elId').hasClass('myCls')) {//Determine whether this style has been added
/ / is styled...
}
10.replaceClass
Ext.fly('elId').replaceClass('myClsA', 'myClsB');//Replacement style
11.getStyle
var color = Ext.fly('elId').getStyle('color');//Return the unified current style and calculated style of the element.
var zIndx = Ext.fly('elId').getStyle('z-index');//Return the unified current style and calculated style of the element.
12.setStyle
Ext.fly('elId').setStyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'
});//Set the style of the element. You can also use an object parameter to contain multiple styles.
13.getColor
Ext.fly('elId').getColor('color');//Return the CSS color for the specified CSS property
14.setOpacity

Ext.fly ('elId').setOpacity(.45, true);//Set the transparency of the element.
15.clearOpacity
Ext.fly('elId').clearOpacity();//Clear the transparency setting of this element


3. Dom Tour
16.Ext.fly('elId').select('li:nth-child(2n)').addClass('red');
17.is tests whether the current element matches the incoming selector Consistent.

18.findParent
Position this node, use this node as the starting point, and search for the outer parent node to the periphery. The search conditions must meet and match the incoming simple selector.
Ext.fly('elId').findParent('div'); // Return dom node
Ext.fly('elId').findParent('div', 4); // Find 4 Node
Ext.fly('elId').findParent('div', null, true); // Return Ext.Element
19.findParentNode
Locate the "parent node" of this node to The "parent node" of this node is used as the starting point, and the outer "parent" node is searched to the periphery. The search conditions must meet and match the incoming simple selector.
Ext.fly('elId').findParentNode('div');
20.up
Search the outer "parent" node along the DOM to the periphery. The search conditions must meet and match The simple selector passed in.
Ext.fly('elId').up('div');
Ext.fly('elId').up('div', 5); // Search within 5 layers only
21.select
Pass in the parameters of a CSS selector, and then use the CSS selector to form a set of expected matching child nodes from below the current element, that is, the "select" operation, and finally use an Ext.CompositeElement type Returned in the form of combined elements. If called with Ext.select(), it means that the document can be searched.
// Return the result's CompositeElement
Ext.fly('elId').select('div:nth-child(2)');
// Return the array
Ext.fly(' elId').select('div:nth-child(2)',
true);
// The entire document will be searched for
Ext.select('div:nth-child(2)') ;
22.query
Perform a query and return an array of DOM nodes. The optional second parameter is set to the starting point of the query, or document if not specified.
// Returns an array composed of dom nodes
Ext.query('div:nth-child(2)');
23.child
Based on the input selector, without limiting the depth Search and select a single child node if it matches.
Ext.fly('elId').child('p.highlight'); // The returned type is Ext.Element
Ext.fly('elId').child('p.highlight', true); // Return dom node
24.down
Based on this selector, "directly" select a single child node.
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, optionally entering an expected selector.
// Returns the parent node, the type is Ext.Element
Ext.fly('elId').parent();
// Returns the parent node, the type is html dom
Ext.fly( 'elId').parent("", true);
// Returns the parent node, but it must be a div. If found, it will be returned. The type is Ext.Element
Ext.fly('elId'). parent("div");
26.next
Get the next side node, skipping the text node. Optionally pass an expected selector.
// Returns the next side node, the type is Ext.Element
Ext.fly('elId').next();
// Returns the next side node, the type is html dom
Ext.fly('elId').next("", true);
// Returns the next side node, but it must be a div. If found, it will be returned. The type is Ext.Element
Ext .fly('elId').next("div");
27.prev
Get the previous side node and skip the text node. Optionally pass an expected selector.
// Returns the previous side node, the type is 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 a div. If found, it will be returned. The type is Ext.Element
Ext .fly('elId').prev("div");
28.first
Get the first side node, skipping the text node. Optionally pass an expected selector.
// Returns the first side node, the type is Ext.Element
Ext.fly('elId').first();
// Returns the first side node, the type is html dom
Ext.fly('elId').first("", true);
// Returns the first side node, but it must be a div. If found, it will be returned. The type is Ext.Element
Ext.fly('elId').first("div");
29.last
Get the last side node, skipping the text node. Optionally pass an expected selector.
// Returns the last side node, the type is Ext.Element
Ext.fly('elId').last();
// Returns the last side node, the type is html dom
Ext.fly('elId').last("", true);
// Returns the last side node, but it must be a div. If found, it will be returned. The type is Ext.Element
Ext .fly('elId').last("div");

4. DOM manipulation (a common task in DHTML is to add, delete, modify, and check DOM elements)
30.appendChild
Classify the entered element as a child element of this element.
var el = Ext.get('elId1');
// Specify with id
Ext.fly('elId').appendChild('elId2');
// Ext.Element Add
Ext.fly('elId').appendChild(el);
// Add selectors in combination
Ext.fly('elId').appendChild(['elId2','elId3' ]);
// Add dom node directly
Ext.fly('elId').appendChild(el.dom);
// Add CompositeElement, a group of divs
Ext.fly( 'elId').appendChild(Ext.select('div'));
31.appendTo
Add this element to the input element.
var el = Ext.get('elId1');
// 'elId' is added to 'elId2'
Ext.fly('elId').appendTo('elId2');
Ext.fly('elId').appendTo(el); //
Add to Ext.Element el
32.insertBefore
Pass in the parameter of an element and place it before the current element Location.
var el = Ext.get('elId1');
// Insert the dom node in front
Ext.fly('elId').insertBefore('elId2');
//Ext .Element el inserts in front
Ext.fly('elId').insertBefore(el);
33.insertAfter
Pass in the parameter of an element and place it after the current element.
var el = Ext.get('elId1');
// The dom node is inserted after
Ext.fly('elId').insertAfter('elId2');
// Ext .Element el inserts after
Ext.fly('elId').insertAfter(el);
34.insertFirst
can insert an element or create an element (to create, please use "DomHelper configuration item object" is passed in as a parameter), in short, this element appears as the first child element of the current element.
var el = Ext.get('elId1');
//The inserted dom node is the first element
Ext.fly('elId').insertFirst('elId2');
// Insert Ext.Element as the first element
Ext.fly('elId').insertFirst(el);
// Use DomHelper configuration item to create a new node, and the new node will be the first one The child element is inserted.
Ext.fly('elId').insertFirst({
tag: 'p',
cls: 'myCls',
html: 'Hi I am the new first child'
});
35.replace
is used to replace the passed in element with this current 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 the 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' replaces 'elId'
// Use the DomHelper configuration item to create a new node and replace 'elId' with this node.
Ext.fly('elId').replaceWith({
tag: 'p',
cls: 'myCls',
html: 'Hi I have replaced elId'
}) ;


5. DomHelper configuration item
37.createChild
Pass in the parameters of a DomHelper configuration item object, create it 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 place it inside 'elId'
el.createChild(dhConfig);
// Create a new node and place it as the first child element of el Before
el.createChild(dhConfig, el.first());
38.wrap
Create a new element, wrapped outside the current element.
Ext.fly('elId').wrap(); // div wraps elId
// Use a new element to wrap elId
Ext.fly('elId').wrap( {
tag: 'p',
cls: 'myCls',
html: 'Hi I have replaced elId'
});

6. Html fragment
38.insertHtml
Insert an HTML fragment into this element. As for where to place the HTML to be inserted in the element, you can specify beforeBegin, beforeEnd, afterBegin, and afterEnd. The second parameter is to insert an HTML fragment, and the third parameter is to decide whether to return a DOM object of type Ext.Element.
Ext.fly('elId').insertHtml(
'beforeBegin',
'

Click me

',
true
); // Return Ext.Element
39.remove
Remove the current element from the DOM , and delete it from the cache. .
Ext.fly('elId').remove(); //
elId is neither in the cache nor in the 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 dom


7. Ajax
41.load
Direct access to Updater Ext.Updater.update() method (same parameters). The parameters are consistent with the Ext.Updater.update() method.
Ext.fly('elId').load({url: 'serverSide.php'})
42.getUpdater
Get 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 handling function to this element. on() is its abbreviation. The abbreviation method has the same effect and saves effort when writing code.
var el = Ext.get('elId');
el.on('click', function(e,t) {
// e is a standardized event object (Ext.EventObject)
// t is the click target element, which is an Ext.Element.
// The object pointer this also points to t
});
44.removeListener/un
From this element Remove an event handler. 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 such an event model that unifies various browsers and tries to comply with W3C standard methods.
// eIt 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. Delegation
To use event delegation instead, Register an event handler on the container and select it according to the attached logic:
Ext.fly('actions').on('click, function(e,t) {
switch(t.id) {
case ''btn-edit':
// The specific process of handling events of specific elements
break;
case 'btn-delete':
// The specific process of handling events of specific elements
break;
case 'btn-cancel':
// The specific process of handling events of specific elements
break;
}
});

47. Delegate Delegate
You can add this option when registering the event handler. A simple selector used to filter the target element or find the descendants of the target one level down.
el.on('click', function(e,t) {
//Execute event specific process
}, this, {
// Valid for descendants 'clickable'
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 handler removeAllListeners
Remove all on this element Joined listener.
el.removeAllListeners();
50. Whether to trigger single at one time
You can add and configure this option when registering the event handler. True means adding a handler function that will remove itself next time after the event is triggered.
el.on('click', function(e,t) {
//The specific process of executing the event
}, this, {
single: true // It will not be executed again after being triggered once Event
});
51. Buffer
You can add this option when registering the event handler. If you specify a number of milliseconds, the processing function will be scheduled to be executed after the Ext.util.DelayedTask delay. If the event fires again at that event, the original handler will not be enabled, but the new handler will be scheduled in its place.
el.on('click', function(e,t) {
//Execute the specific process of the event
}, this, {
buffer: 1000 // Repeat the event in one second Time interval
});
52. Delay
You can add this option when registering the event handler. Specify the delayed execution time of the post-trigger event processing function.
el.on('click', function(e,t) {
//Execute event specific process
}, this, {
// Delay event, start timing after responding to the event (here One second)
delay: 1000
});
53. Target target
You can add this option when registering the event handler. If you want to specify another target element, you can set it on this configuration item. This ensures that this processing function will only be executed when this element is encountered during the event reporting phase.


10. Size & Size
54.getHeight
Returns the offset height of the element.
var ht = Ext.fly('elId').getHeight();
55.getWidth
Returns the offset width of the 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 (side(s)).
var bdr_wd = Ext.fly('elId').getBorderWidth('lr');
59.getPadding
can be t, l, r, b or any combination. For example, passing the lr parameter will result in (l)eft padding (r)ight padding.
var padding = Ext.fly('elId').getPadding('lr');
60.clip
Save the current overflow (overflow), and then clip the overflow part of the element - use unclip( ) to remove.
Ext.fly('elId').clip();
61.unclip
Return the original clipped part (overflowed) before calling clip().
Ext.fly('elId').unclip();
62.isBorderBox
Test different CSS rules/browsers to determine if the element uses a Border Box.
if (Ext.isBorderBox) {
//
}

11. Positioning

63.getX
Returns the relative element at the X position of the page coordinates. Elements must be part of the DOM tree to have correct page coordinates (display:none or unjoined elements returns false).
var elX = Ext.fly('elId').getX()
64.getY
Returns the Y position of the element relative to page coordinates. Elements must be part of the DOM tree to have correct page coordinates (display:none or unjoined elements returns false).
var elY = Ext.fly('elId').getY()
65.getXY
Returns the position of the element's current page coordinates. Elements must be part of the DOM tree to have correct page coordinates (display:none or unjoined elements returns false).
var elXY = Ext.fly('elId').getXY() // elXY is an array
66.setX
Returns the X position of the element relative to page coordinates. Elements must be part of the DOM tree to have correct page coordinates (display:none or unjoined elements returns false).
Ext.fly('elId').setX(10)
67.setY
Returns the Y position of the element relative to page coordinates. Elements must be part of the DOM tree to have correct page coordinates (display:none or unjoined elements returns false).
Ext.fly('elId').setY(10)
68.setXY
Returns the position of the element's current page coordinates. Elements must be part of the DOM tree to have correct page coordinates (display:none or unjoined elements returns false).
Ext.fly('elId').setXY([20,10])
69.getOffsetsTo
Returns the distance between the current element and the input element. Both elements must be part of the DOM tree to have correct page coordinates (display:none or elements not added returns false).
var elOffsets = Ext.fly('elId').getOffsetsTo(anotherEl);
70.getLeft
Get the X coordinate of the left side.
var elLeft = Ext.fly('elId').getLeft();
71.getRight
Get the X coordinate of the right side of the element (element X position element width).
var elRight = Ext.fly('elId').getRight();
72.getTop
Get the top Y coordinate.
var elTop = Ext.fly('elId').getTop();
73.getBottom
Get the bottom Y coordinate of the element (element Y position element width).
var elBottom = Ext.fly('elId').getBottom();
74.setLeft
Use CSS style directly (instead of setX()) to set the left position of the element.
Ext.fly('elId').setLeft(25)
75.setRight
Set the style of element CSS Right.
Ext.fly('elId').setRight(15)
76.setTop
Use CSS style directly (instead of setY()) to set the top position of the element.
Ext.fly('elId').setTop(12)
77.setBottom
Set the style of the CSS Bottom of the element.
Ext.fly('elId').setBottom(15)
78.setLocation
No matter how this element is positioned, set its coordinate position on the page. Elements must be part of the DOM tree to have page coordinates (display:none or unadded elements will be considered invalid and return false).
Ext.fly('elId').setLocation(15,32)
79.moveTo
No matter how this element is positioned, set its coordinate position on the page. Elements must be part of the DOM tree to have page coordinates (display:none or unadded elements will be considered invalid and return false).
Ext.fly('elId').moveTo(12,17)
80.position
Initialize the position of the element. If the expected position is not passed and it is not positioned yet, the current element will be set to relative positioning.
Ext.fly('elId').position("relative")
81.clearPositioning
Clear the position and reset to default after the document is loaded.
Ext.fly('elId').clearPositioning()
Ext.fly('elId').clearPositioning("top")
82.getPositioning
Returns an object containing CSS positioning information . Useful tip: Together with setPostioning, you can take a snapshot before the update is performed, and then restore the element.
var pos = Ext.fly('elId').getPositioning()
83.setPositioning
The object returned by getPositioning() is used for positioning.
Ext.fly('elId').setPositioning({
left: 'static',
right: 'auto'
})
84.translatePoints
Send into a page Argument for the coordinates, translated into the element's CSS left/top values.
// {left:translX, top: translY}
var points = Ext.fly('elId').translatePoints(15,18);