Extjs does a good job in event-driven programming. The following uses a simple example to demonstrate how ext handles events.
In event-driven programming, extjs can easily process various events of components. The method for adding events to a component is: component. On (event, FN );
For example, you can add a click event for the button,
// Create a button. Here the component is created like in Java, and the object-oriented method is used to create the component. Therefore, extjs is an embodiment of JavaScript object-oriented language.
VaR BTN = new Ext. Button ({text: ""}); BTN. On ("click", function () {content of the executed function });
The following is an example of event programming: a dialog box is displayed when a single user clicks a button. The text value of the button at the same time is displayed in the title of the displayed window.
Event.html code:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>The event. js code is as follows:
Ext. onready (function () {// create the first button var btn1 = new Ext. button ({text: "button1", renderto: ext. get ("BTN")}); // create the second button var btn2 = new Ext. button ({text: "button2", renderto: ext. get ("BTN")}); // function btnclick (BTN, e) {New Ext. window ({Title: BTN. text, width: 200, height: 200 }). show () ;}; btn1.on ("click", btnclick); btn2.on ("click", btnclick );});
Summary:
The click event API in the button component is as follows:
Click (button this, eventobject E)
Click trigger event. Fires when this button is cl...
Click trigger event. Fires when this button is clicked
The listener will pass in the following parameters:
This button
E eventobject
Click the event object. The click eventIn the above example, we listened to the button click event --> btn1.on ("click", btnclick ); therefore, when you click a button, the callback function btnclick is executed. This callback function can be used to input two parameters, of course, you can pass in different parameter lists as needed. Among the two parameters, parameter 1 is the button itself, and parameter 2 is the clicked event object. Then we get the button itself, so we can operate on the attributes of the button.
Conclusion: when using event-driven programming to handle various events in extjs, you can refer to the official API, which is a good learning material for us!
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
