Home > Developer > JavaScript
The difference is that fly returns the lightweight Element, which occupies less memory, but does not save the object reference. Every time it is used, the previous object is changed, and get caches the Element object returned each time, however, it occupies a large amount of memory. Let's use an example to illustrate the differences between the two and look at the powerful functions provided by Element. Add an html page in our project with the following content:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Element Demo </title>
<Link rel = "stylesheet" type = "text/css" href = "extjs/resources/css/ext-all.css"/>
<Script type = "text/javascript" src = "extjs/ext-base-debug.js"> </script>
<Script type = "text/javascript" src = "extjs/ext-all-debug.js"> </script>
<Script type = "text/javascript" src = "extjs/ext-lang-zh_CN.js"> </script>
<Script type = "text/javascript" src = "js/element. js"> </script>
</Head>
<Body>
<Input type = "button" value = "click my" id = "btn"/>
<Div id = "div1"> </div>
<Div id = "div2"> </div>
</Body>
</Html>
Of course, you 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 codeThe Code is as follows:
// <Reference path = "vswd-ext_2.0.2.js"/>
/**//*
* Author: Dummies
* Date: 2009-10-12
* Release: 1.0
*/
Ext. onReady (function (){
Ext. get ("btn"). on ("click", function (){
Var el1 = Ext. get ("div1 ");
Var el2 = Ext. get ("div2 ");
El1.addClass ("red"); // adds a CSS class.
El2.addClass ("green ");
El1.setWidth (); // set the width.
El1.highlight (); // highlighted
El1.center (); // center
El1.setOpacity (0.5); // sets the 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, click the button to see the effect. The code is intuitive and does not require too much explanation. Now we replace the get method of Element with fly. After running, we will find that all operations are performed on div2, because the Element reference of div1 is not saved, the second time we used the fly method, we changed the Element object obtained for the first time, so we can see that all operations were performed on div2. Many people who have used jquery like to write code using method chain. Because most methods of Element objects return Element objects, method chain can also be used here, as I wrote in 23 rows. However, note that the methods of highlight, fadeIn, and fadeOut are not actually the methods of Element objects. They are actually Ext. the methods in the Fx class only use the js apply method to add them to the Element Object (for the use of the apply method, refer to here). The methods in the Fx tears use the internal effect queue, the effect is in a specific order, while the Element Object method is executed immediately. Therefore, when using both Element and Fx methods in the method chain, you must note that unexpected results may be generated.
The setWith method is used in our code. There are some methods starting with set in the Element class for some settings. There is an optional parameter for these methods to present the animation effect, this parameter can be a Boolean value, which can be used to enable the default setting or a json object to customize the animation in detail. Let's change the code on the top, let's take a look at the animation effect:
Copy codeThe Code is as follows:
// <Reference path = "vswd-ext_2.0.2.js"/>
/**//*
* Author: Dummies
* Date: 2009-10-12
* Release: 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 ("info", "the width of div1 is set to 100 ")},
Scope: this
});
});
});
Briefly explain the above Code: duration indicates the animation time, which is 3 seconds. easing is used to set the Animation Mode and must be effective Ext. lib. easing value, which can obtain all valid values from the help document; callback, the function called when the animation is executed, scope specifies the scope of the callback function.
In addition to the get and fly methods, Element also has a select method, which is a very powerful method. You can obtain an array of elements based on the selector (in fact, a CompositeElementLite or CompositeElement object is returned, these two classes are inheritance relationships in js and an array of Element objects is maintained internally. When we use the Element method on the returned object, the method is actually called for every Element object in the array ). This method can be abbreviated as Ext. select has a selector as the parameter. The usage is similar to jquery, for example, Ext. select ("p") selects all p tags, Ext. select (". red) selects all the tags whose css class is red. The selector can be used in combination, for example, "div. foo: nth-child (odd) [@ foo = bar]. bar: first ". Good at using selector can bring great convenience to our control elements. You can refer to the Ext. DomQuery Class documentation to learn more about selector.
The query method of Element uses a method similar to select to return the set of Dom nodes. However, note that Ext. query is not Ext. element. short for query, but Ext. domQuery. the abbreviation of the select method. Dom contacts can get Element objects through the get method, while Element objects can get dom nodes through Dom attributes. We can easily convert them according to different needs.
Finally, let's talk about the addListener method of Element. This method can be abbreviated as on, which is used to register an event for the Element Object. We have seen on ("click", function (){}) this method is used. This method can also be used to register multiple events at a time, for example:
Copy codeThe 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 the event processing function will be executed after the event is triggered, in milliseconds. There is also a simple Syntax:
Copy codeThe Code is as follows:
El. on ({
'Click': this. onClick,
'Mouseover': this. onMouseOver,
'Mouseout': this. onMouseOut,
Scope: this
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
