Begin...
The most commonly used in ExtJS is Ext.onready this method, and it may be the first way you learn ExtJS, which is automatically invoked after the current DOM is loaded. Ensure that all elements within the page are referenced by the script. You can try adding a statement to this method to see what the page will look when it's opened:
Copy Code code as follows:
Ext.onready (function () {
Alert (' Hello world! ');
});
The code above will pop up a dialog box after the page is loaded and print out ' Hello world! ' Words.
get Element
There is also a common way to get the elements on the page, ExtJS provides a getting method that can be taken to the elements on the page based on the ID:
var mydiv = ext.get (' mydiv ');
Takes the element with the id ' mydiv ' on the page. If you use the Element.dom method, you can directly manipulate the underlying DOM node, and Ext.get returns a single Element object.
When you can't get multiple DOM nodes in this way, or if you want to get some ID inconsistencies but have the same characteristics, you can get them by selector, such as getting all the
Label, you can use the following:
var PS = ext.select (' P ');
So you can manipulate the elements you want to get, and the Select () method returns a Ext.compositeelement object that you can traverse through each () method:
Copy Code code as follows:
Ps.each (function (EL) {
El.highlight ();
});
Of course, if you do the same thing with all the elements you get, you can apply it directly to the Compositeelement object, such as:
Ps.highlight ();
Or:
Ext.select (' P '). Highlight ();
Of course, select parameters can be more complex, including the Css3dom selector, the basic xpath,html properties, and so on, for details, you can view the documentation for the Domquery API to learn more.
Event Response
Gets the element, you might be able to handle some of the elements ' events, such as getting a button, and we add a response for it to a click event:
Copy Code code as follows:
Ext.onready (function () {
Ext.get (' MyButton '). On (' click ', function () {
Alert (' You clicked the button! ');
});
});
Of course, you can add the response of the event to the element that is obtained through the Select () method:
Copy Code code as follows:
Ext.select (' P '). On (' click ', function () {
Alert (' You clicked a paragraph! ');
});
Widgets
ExtJS also provides a rich UI library for everyone to use.
message window
Replace the previous alert () method with a ExtJS-provided scenario:
Copy Code code as follows:
Ext.onready (function () {
Ext.get (' MyButton '). On (' click ', function () {
Alert (' You clicked the button! ');
});
});
