ExtJS Self-Study Tutorials (1): Everything starts with the API

Preface

This series of articles does not focus on all-round introduction to the use of ExtJS, but focused on solving the extjs problem of thinking methods. He who writes does not have to be lengthy, but he learns to be self-reliant. L
As long as there are some basic knowledge of CSS JavaScript and not very bad for English (with auxiliary word bully can read the ExtJS API), you can refer to this tutorial for practice.

"I" everything starts with the API

A lot of friends learn ExtJS in the beginner ExtJS feel ExtJS very simple effect is very good, a few lines of code will get the effect. But with a lot of use, the complaining began: ExtJS layout how so troublesome ah. Where did those parameters come from? I want to get an effect how can not get out, then Fengfenghuohuo in the forum to send a lot of posts. Found that few people, they came to the conclusion: ExtJS bad use. But can be very smooth with extjs solve problems of people, so, do not complain sour grapes, want to improve, or settle down sit down to see the post:)

Before studying, we must first understand a truth: the so-called development master, solve the problem naturally faster than ordinary people. In addition to experience, one of the most capable is to find information faster than ordinary people. Like a martial arts cheats, fall into the hands of ordinary people is usually not much use, get "high man", first learn some "internal internal heart heart." For ExtJS, "Martial arts Cheats" is the ExtJS API documentation. So, learning ExtJS, first you have to learn how to see the API. So, the first step is to learn how to look at ExtJS API documentation

Download the development Kit for ExtJS 2.0.2 (the last free version of ExtJS), and after extracting it, you can see the following directories:

Adapter   ExtJS and other JS development package compatible with the use of adapters, Jquery,prototype and Yui, but also one is ExtJS own
       the integration of air and Adobe AIR
Build     Jsbuild out of the directory
Docs      Martial Arts Cheats this is it.
Examples  Some of the ExtJS official examples, can be used to draw some scoop gourd
    source Jsbuild, which has a JSB project file, can build its own ext-all.js
Resources ExtJS Run the required resource files, including icons and CSS for these

If you downloaded ExtJS have these non-empty directories, congratulations, at least 80% may prove that you download this ExtJS is not a cottage or castrated version. The ExtJS API can be further studied to see the HTTP environment, which is recommended liteserve. Green software is small and full of functions. Of course you can also use Apache or IIS, and then point the Web root directory to the ExtJS directory, for example: d:/ext-2.0.2, the port runs at 80. Then after the server-typed address: Http://localhost/docs/,loading is finished, you can see the interface of the ExtJS API as follows



When you click on the tree on the left, the tab on the right will add a label to the class and display the information for that class within the page. For example, the panel is as follows:



As shown in the figure you can see the ExtJS package, the original definition file (the corresponding file in the build src), the related class, the inherited subclass, the parent class, and an intuitive inheritance tree. Then the next area "Panel is." is a description of the class, the area is important, and the area of the class is usually given an example of how to use the class and where to note it.

Next is the configuration, properties, methods, and event 4 parts. From the picture above you can see that the top of the details gives the link to these 4 sections: "Properties" "Methods" "Events" "Config Options".
You can scroll through the 4 sections by scrolling the mouse:

The first appearances are the Config options, which are parameters of the constructor method when the class is created. As follows:


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

The first column is a small triangular arrow. You can collapse and expand the parameter description.

The second column is the parameter description, and the end of the content is displayed as "..." If the description area has not finished displaying the content. For example, the arrows in the first column of the Animcollapse can be expanded. Activeitem parameter that line is the effect of the expansion. The description of the parameter is displayed after expansion, note that there are many parameters in the config options that have the default property, that is. At new, the parameter objects does not pass in the parameter, which defaults to using the default value, which greatly reduces the number of construction parameters when used. For example, new a Panel, in addition to specifying the rendered object, can only configure HTML properties, such as: New Ext.panel ({renderto: ' Paneldiv ', HTML: ' content '});
One thing to be aware of is that when you pass in the Config object, you don't have to do more or miss a comma. The object definition format of IE is very strict, the last member of the object cannot end with a comma, otherwise JS will be loaded in error. For example: New Ext.panel ({renderto: ' Paneldiv ', HTML: ' content ',}); It can be passed under FireFox3, but it will cause an error that cannot be compiled under IE6. The

   third column is the definition class, and because JavaScript is also the syntax of OO, subclasses inherit the properties and methods of the parent class. There is an inherited property or method with an upward arrow in front of it, usually if you look at the unique functionality of a class (for example, the collapsed collapse related method of a panel class), you need to find difined by as the description row for the current class, which is convenient.

   for the use of config options, there is also a convenient place, that is, when the xtype of the config options is specified, you can not go to the new object when ExtJS generates the container's sub-object, Instead, you only need to pass in the configuration object and specify Xtype in the object. Some containers have default xtype items, such as Ext.panel's items incoming configuration object default xtype is ' Panel ', ext.panel buttons incoming configuration object By default xtype is the button. For example, the following 3 types of notation are equivalent:

New Ext.panel ({  renderto: ' Paneldiv ',  items:[{    HTML: ' content 1 '  },{    HTML: ' Content 2 '  }],  buttons : [{    text: ' Test button '  }]}); You can also write new Ext.panel ({  renderto: ' Paneldiv ',  items:[{    xtype: ' Panel ',    HTML: ' content 1 '  },{    xtype: ' Panel ',    HTML: ' Content 2 '  }],  buttons:[{    xtype: ' button ',    text: ' Test button '  }]}); or 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 one is simpler than the other two types.

Next is the public Properties, which defines the member variables for the object. It can be accessed directly from a point number, which is usually read-only. As follows:

There is nothing to say in this section, just look at the instructions in comparison. The only thing to note is the Initialconfig property. That's what it means.

Initialconfig:object
This Component ' s initial configuration specification. Read-only.

This property provides direct access to your initialization object, which saves some var variables, if they are objects that pass into config, such as toolbar. Can be obtained directly from the Initialconfig attribute.

Next comes the public Methods, which is the open object method. This section defines the methods by which an object can be accessed.


This section, by the way, is the parameter of the method. For JavaScript, its use is relatively "random", without support for overload, making it extremely easy to get the parameters passed in when writing. Therefore, you need to pay attention to the parameter types, for the different parameter types can be used, between the/number interval is opened. For example, the Add method expands to see the detailed use of each parameter, such as when it is expanded to illustrate the object parameter:

A Component config object passed in order to avoid the overhead of constructing a real Component object
In other words, you can pass a config object directly instead of a Ext.component object. So you can understand that it's OK to use a similar add ({xtype: ' button ', Text: ' Buttons '}).

So, ExtJS's API is the most complete ExtJS tutorial, stronger than any tutorial practice. Of course, there is also a deeper learning part, that is to see ExtJS source code, see ExtJS Source code can achieve some more powerful than the API, for example, the Formlayout Ext.form.Radio in the horizontal. This depends on the source code.

The next part is also very important, if you want to increase the behavior of the ExtJS object, in addition to the extension object. The most common is to add listening. You'll often see some people on the Web writing listener, without knowing how those parameters are used, and here's where you're most worthy of learning. That's what's next:

Public Events


For example, the first line of active: (Ext.panel p), then that is, in this object's listeners, you can listen to the active method, this method has a parameter p, The passed-in object is Ext.panel, and typically, if the passed parameter name is the current class or its parent class, the object itself, such as the name of the 2nd event, is clear: Ext.container this. But you do not use, also named variable called this, why? Very simple, javascript keyword chant.

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


After reading the API documentation, are you aware of the use of the event? If you're not sure, look at the code:

New Ext.panel ({  renderto: ' Paneldiv ',  title: ' title ',  items:[{    xtype: ' button ',    text: ' Buttons '  }],  listeners:{    afterlayout:function (panel, layout) {      alert (Panel.getxtype ());}}  );

Because active is an event that is not directly invoked, instead of using the AfterLayout event as an example, you can try to use a panel to access your new object in the AfterLayout method. You will find that ExtJS gives the freedom to play the space is actually very powerful!


ExtJS Event Monitoring, in addition to specifying listeners directly at object creation time, can also be used to implement dynamic additions after object creation. API says:
On (String eventName, Function handler, [object scope], [object options])
If you don't want to listen, you can remove it with UN:
Un (String eventName, Function handler, [Object scope])

It is also very noteworthy. Even though ExtJS's component objects have DOM elements, there are also those methods supported by DOM elements such as click,resize. But the events of ExtJS are extended. That is, it is possible to add some special methods that are supported by ExtJS itself, and there may be some difference between the behavior and the direct DOM invocation, such as the Resize method:
Resize: (ext.component This, number adjwidth, number adjheight, number rawwidth, number Rawheight)
The first element is a ExtJS object that is significantly different from the DOM elements of HTML, so don't confuse it.

ExtJS Self-Study Tutorials (1): Everything starts with the API