extjs study notes (2) Ext.Element class_extjs

The difference is that fly returns a lightweight Element and occupies less memory, but does not save the reference to the object. Each use will change the previous object, while get will cache the Element object returned each time, but it occupies more memory. of memory. We use an example to illustrate the difference between the two, and at the same time look at the powerful functions that Element provides us. Add an html page to our project with the following content:

Copy the code The code is as follows:

< ;html xmlns="http://www.w3.org/1999/xhtml" >










< ;div id="div1">

Of course, we also need to add the element.js file. We first use the Ext.get method to obtain the element object and perform some operations. The code is as follows:

Copy the code The code is as follows:

///
/**//*
*Author: Daben
*Date: 2009-10-12
*Version: 1.0
*/

Ext.onReady(function() {
Ext.get("btn").on("click", function() {
var el1 = Ext.get( "div1");
var el2 = Ext.get("div2");
el1.addClass("red"); //Add CSS class
el2.addClass("green");
el1.setWidth(); //Set width
el1.highlight(); //Highlight
el1.center(); //Center
el1.setOpacity(0.5); // Set transparency
el2.fadeIn({ endOpacity: 1, //can be any value between 0 and 1
easing: 'easeOut',
duration: 1
});
//el1.addClass("red").setWidth(100).setOpacity(0.5).center();
});
});

After running, we click The effect can be seen with the button button. The code is very intuitive and does not require too much explanation. Now we change the get method of Element to fly. After running it, we will find that all operations are performed on div2, because the Element reference of div1 has not been saved. The second time we use the fly method, the first time is rewritten. The obtained Element object, so we see that the operations are performed on div2. Many people who have used jquery like to write code in a method chain. Since most methods of the Element object still return Element objects, a method chain can also be used here, just like what I wrote in line 23. . But please note that the methods highlight, fadeIn, and fadeOut are not actually methods of the Element object. They are actually methods in the Ext.Fx class. They are just added to the Element object using the apply method of js (the use of the apply method can (Refer here), the methods in Fx Tears use the internal effect queue, the effects are in a specific order, while the methods of the Element object are executed immediately. Therefore, you need to be careful when using the Element and Fx methods at the same time in the method chain, as undesirable results may occur.
The setWith method is used in our code. There are also some methods starting with set in the Element class, which are used to make some settings. Most of these methods have an optional parameter to present the animation effect. This parameter can It is a Boolean value that can be used to enable the default settings, or it can be a json object used to customize the animation in detail. Let’s change the above code to see the effect of animation:

Copy code The code is as follows:

///
/**//*
*Author: Daben
*Date: 2009-10-12
*Version: 1.0
*/
Ext.onReady(function() {
Ext.get("btn").on("click", function() {
Ext .fly("div1").addClass("red").setWidth(100, {
duration: 3,
easing: 'elasticIn',
callback: function() {Ext.Msg.alert ("Information", "The width of div1 is set to 100") },
scope: this
});
});
});

Briefly explain the above code: duration specifies the animation time, here it is 3 seconds; easing is used to set the animation method, which must be a valid Ext.lib.Easing value. You can get all the information from the help document. Valid values; callback, the function called when the animation is completed, scope specifies the scope of the callback function.
In addition to using the get and fly methods, Element also has a select method, which is a very powerful method. You can get an array of Elements based on the selector (actually, it returns a CompositeElementLite or CompositeElement object. These two classes It is an inheritance relationship in js, which maintains an array of Element objects internally. When we use the Element method on the returned object, we actually call the method on each Element object in the array). This method can be abbreviated as Ext.select. It has a selector as a parameter. The usage method is similar to jquery. For example, Ext.select("p") will select all p tags, and Ext.select(".red") will select For all tags whose CSS class is red, selectors can be used in combination, such as "div.foo:nth-child(odd)[@foo=bar].bar:first". Being good at using selectors can bring great convenience to us in controlling elements. You can refer to the documentation of the Ext.DomQuery class to get more knowledge about selectors.
Element’s query method uses a method similar to select to return a collection of Dom nodes. However, it should be noted that Ext.query is not the abbreviation of Ext.Element.query, but the abbreviation of the Ext.DomQuery.select method. The Dom contact can obtain the Element object through the get method, and the Element object can obtain the Dom node through the dom attribute. According to different needs, we can easily convert it.
Finally, let’s talk about the addListener method of Element. This method can be abbreviated as on, which is used to register events for the Element object. We have already seen the usage of on("click", function(){}). You can also register multiple events at one time through this method, for example:

Copy code The code is as follows:

el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
} );

delay indicates how long after the event is triggered to execute the event processing function, the unit is milliseconds. There is also a concise way of writing:

Copy code The code is as follows:

el.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});