ExtJs self-study tutorial (1): Everything starts from API

Question

This series of articles does not focus on the use of ExtJs in an all-round way, but focuses on how to solve the ExtJs problem. The writer does not have to give a long story, but the learner can be self-reliant. L
As long as you have basic knowledge about CSS javascript and are not very poor at English (refer to this tutorial to learn more about ExtJs APIs.

Everything starts from API

Many ExtJs learners think that ExtJs works very well when they are new to ExtJs. After a few lines of code, they can get the result done. But when I use it a lot, the complaint begins: How is ExtJs layout so troublesome. Where are the parameters? I can't figure out how it works, and I will post a lot of posts on the forum. When I found that there were not many workers, I came to the conclusion that ExtJs is not easy to use. However, there are a lot of people who can solve the problem smoothly with ExtJs, so don't complain about sour grapes. If you want to improve it, you have to sit down and read the post with peace of mind :)

Before learning, you must first understand the truth: the so-called development experts, solving problems naturally faster than ordinary people. In addition to experience, one of the most competent aspects is that it is faster to search for information than ordinary people. Like a martial arts secret, it is usually not very useful to ordinary people. You have to be "advanced" and learn the "internal strength" first ". For ExtJs, the "Martial Arts secret" is the API document of ExtJs. Therefore, to learn ExtJs, you must first learn how to look at the API. Therefore, the first step is to learn how to read ExtJs API documentation.

Download the ExtJs 2.0.2 (the last free version of ExtJs) Development Kit. After decompression, you can see the following directories:

Adapter Extjs is compatible with other JS Development kits, such as jquery, prototype, and yui, also, the directory docs Martial Arts secret, which is built by the integration of ExtJs air and adobe air, provides some official ExtJs examples of examples, you can draw some sources for source JSBuild, which has a jsb project file, you can build your own Ext-all.js resources ExtJs to run the required resource files, including icons and CSS.

If the ExtJs you downloaded has these non-empty directories, congratulations, at least 80% may prove that the ExtJs you downloaded is not a cottage version or a castrated version. You can learn more about the HTTP environment required for viewing ExtJs APIs. Here we recommend LiteServe. The green software is small and functional. Of course you can also use apache or IIS, and then point the WEB root directory to the ExtJs decompression directory, such as: d:/ext-2.0.2, port 80 to run. Then, input the address http: // localhost/docs/on the server. After loading, you can see the ExtJs API interface as follows:



After clicking on the tree on the left, the tab on the right can add the label of the class and display the information of the class in the page. Take panel as an example:

 

You can see the ExtJs package, the original definition file (the file corresponding to the src build), the related class, the inherited subclass, the parent class, and an intuitive inheritance tree. Then the following area "panel is..." is the description of this class. This area is very important. Generally, this area of the class may provide examples of this class and areas to be aware.

The following describes configuration, attributes, methods, and events. As shown in the figure above, the link to the four parts is provided at the top of the details: "Properties" "Methods" "Events" "Config Options ".
Scroll the mouse to view the four parts in sequence:

Config Options appears first. These parameters are parameters of the constructor when the class is created. As follows:


You can see that the content is divided into three columns:

The first column is a small arrow. This parameter description can be folded and expanded.

The second column is the parameter description. If there is still content not displayed in the description area, it will be displayed as "..." at the end of the content. For example, in animCollapse, the arrow in the first column can be expanded. The row of the activeItem parameter is the expanded result. The description of this parameter is displayed. Note that many parameters in Config Options have the default attribute, that is. When new is used, the parameter Objects does not pass in this parameter. By default, this parameter uses the default value, which greatly reduces the number of construction parameters used. For example, in a new panel, you can configure only the html attributes except the rendered object, for example, new Ext. panel ({renderTo: 'paneldiv ', html: 'content '});
Note that when you pass in the config object, do not add more or omit commas. The object Definition Format of IE is strict. The last member of an object cannot end with a comma. Otherwise, an error occurs during JS loading. Example: new Ext. panel ({renderTo: 'paneldiv ', html: 'content',}); it can be passed in FireFox3, but in IE6, it will lead to an error that cannot be compiled.

The third column is the definition class. Because javascript is also the OO syntax, the subclass also inherits the attributes and methods of the parent class. The previous property or method with an up arrow is inherited. Generally, if you look at the special functions of a class (such as the method related to the collapse of the Panel class ), you need to find Difined By as the description line of the current class, which is very convenient.

For the use of Config Options, it is more convenient to specify the xtype of Config Options. When ExtJs generates the sub-object of the container, a new object is not needed, you only need to input the configuration object and specify the xtype in the object. Some containers use the default xtype for items. For example, the default xtype of the input configuration object of Ext. Panel is 'panel ', and the default xtype of the input configuration object of buttons of Ext. panel is button. For example, the following three statements are equivalent:

New Ext. panel ({renderTo: 'paneldiv ', items: [{html: 'content 1'}, {html: 'content 2'}], buttons: [{text: 'test button '}]}); you can also write it as new Ext. panel ({renderTo: 'paneldiv ', items: [{xtype: 'panel', html: 'content 1'}, {xtype: 'panel ', html: 'content 2'}], buttons: [{xtype: 'button ', text: 'test button'}]}); or use the new method new Ext. panel ({renderTo: 'paneldiv ', items: [new Ext. panel ({html: 'content 1'}), new Ext. panel ({html: 'content 2'})], buttons: [new Ext. button ({text: 'test Button '})]});

Obviously, the first method is easier than the other two.

Next is Public Properties, which defines the member variables of the object. It can be accessed directly by the dot. Generally, this part is read-only. As follows:

 

There is nothing to say about this part. Just check the instructions. The only note is the initialConfig attribute. This is the case.

InitialConfig: Object
This Component's initial configuration specification. Read-only.

This attribute can directly access your initialization object, which saves some var variables, for example, passing in the config object, such as ToolBar. You can get it directly from the initialConfig attribute.

The next step is Public Methods, which is the Public object method. This part defines the accessible methods of objects.


This section also describes the parameters of the method. For javascript, it is relatively "random" and does not support overload, making it very easy to make mistakes when writing parameters. Therefore, you need to pay attention to the parameter types. For different parameter types, the parameter types can be separated by a comma. For example, after the add method is expanded, you can see the detailed usage methods of each parameter. For example, the following describes the Object parameters:

A Component config object may be passed in order to avoid the overhead of constructing a real Component object
That is to say, you can directly upload a config object instead of an Ext. Component Object. In this way, you can understand that it is also possible to use a method similar to add ({xtype: 'click', text: 'click.

Therefore, the ExtJs API is the most comprehensive ExtJs tutorial, which is better than any tutorial or practice. Of course, there is also a deeper learning part, that is, you have to look at the ExtJs source code, look at the ExtJs source code can achieve some more powerful functions than the API, for example, put the Ext in formLayout. form. radio. This depends on the source code.

The next part is also very important. To increase the ExtJs object behavior, in addition to the extension object. The most common thing is to add listeners. You will often see some people writing Listener on the internet, without knowing how to use those parameters. Here is the most worth learning. That is, the following:

Public Events


For example, the first line is active: (Ext. panel p), that is to say, in the listeners of this object, you can listen to the active method. This method has a parameter p, and the input object is Ext. panel. Generally, if the input parameter name is the current class or its parent class, it refers to the object itself. For example, the name of the 2nd events is clear: Ext. container this. But you don't need to name the variable this when using it. Why? The javascript keyword is simple.

The next line is the event occurrence condition: Fires after the Panel has been exactly ally activated
This indicates that the event is triggered when the object becomes visible and active.


After reading the API documentation, do you know how to use the Event? If you do not know, check the Code:

New Ext. panel ({renderTo: 'paneldiv ', title: 'title', items: [{xtype: 'button', text: 'button'}], listeners: {afterlayout: function (panel, layout) {alert (panel. getXType ());}}});

Because active is not a directly called event, you can use the afterlayout event as an example. You can try to use panel to access the method of your new object in the method after afterlayout. You will find that the free space provided by ExtJs is actually very powerful!


In addition to specifying listeners when creating an object, you can use the on method to dynamically add an object after it is created. API:
On (String eventName, Function handler, [Object scope], [Object options])
If you do not want to listen, you can also remove it using un:
Un (String eventName, Function handler, [Object scope])

Another point is worth noting. Although the Component objects of ExtJs all contain dom elements, there are also methods supported by dom elements, such as click and resize. However, ExtJs events are extended. That is, some special methods supported by ExtJs may be added, and the behavior may be different from the direct dom call, such as the resize method:
Resize: (Ext. Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight)
The first element is an ExtJs object, which is significantly different from html dom elements.

From Special Forces-AK47