ExtJS Self-Study tutorial (1): Start with all APIs

Title Remember

This series of articles is not the introduction of a full set of focus ExtJS use, you just focus on solving extjs thinking problems. People don't write long speeches. Others can learn to be self-reliant. L
Some people just learn css JavaScript for English is not very poor (with auxiliary word bully can read the API of ExtJS), can participate in this tutorial to practice.

"I" all start with the API

A lot of learning ExtJS friends in the beginner ExtJS think ExtJS very easy effect is very good, a few lines of code will effect. But it's much used. The complaint began: ExtJS layout how so troublesome ah. Where did those numbers 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 this problem of people, so, do not complain sour grapes, want to improve. Or settle down to sit down and watch the post:)

Before the study. First of all, a clear truth: the so-called development experts, to solve the problem is naturally faster than ordinary people. In addition to experience, the most important aspect of the ability is to find information faster than ordinary people. Like a martial arts cheats. It is not very useful to fall into the hands of ordinary people. To "Gao", 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

To download the development package for ExtJS 2.0.2 (the last free version of ExtJS), after unzipping, you can see that there are several folders:

Adapter   ExtJS and other JS development packages are compatible with adapters, Jquery,prototype and Yui, and one is ExtJS own
       the integration of air and Adobe AIR
Build     Jsbuild out of the folder
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 perform the required resource files, including icons and CSS for these

If you downloaded ExtJS have these non-empty folders, congratulations. At least 80% may prove that the ExtJS you downloaded is not a cottage or castrated version.

Can further learn the ExtJS API to view the HTTP environment, it is recommended liteserve. Green software is small and full of functions. Of course you can also use Apache or IIS. Then point the Web root folder to ExtJS's unzip folder, for example: d:/ext-2.0.2. Port executes in 80. Then, after the server-typed address: Http://localhost/docs/,loading is complete, you will be able to see the interface of the ExtJS API such as the following



When you click on the left tree, the tab on the right will add a label to the class and display the information for that class in the page. The panel is proportional to the following:



You can see ExtJS's bag. The original definition file (the corresponding file in the build src). Related classes, inherited subclasses, parent classes, and an intuitive inheritance tree.

Then the next area "Panel is." is a description of the class, the area is very important, and the area of the class is usually given a sample of the use of the class and places to be noticed.

Next is the configuration, properties, methods, and event 4 parts. From the above image can be seen, the specific information at the top of the 4 parts of the link: "Properties" "Methods" "Events" "Config Options".

Scrolling the mouse allows you to navigate through the 4 sections in turn:

The first appearances are the Config options, which are the parameters of the constructor method when the class is created. For example, the following:


You can see 3 columns of content:

The first column is a small triangular arrow. The ability to collapse and expand the description of the parameters.

The second column is the parameter description, assuming that the description area is not finished, and the end of the content is displayed as "...".

For example, the arrows in the first column of the Animcollapse can be expanded. Activeitem the line is the effect of the unfolding.

Displays a description of the parameter after it is expanded. Note that there are a lot of parameters in the config options that have the default property. Other words. The number of objects in new is not passed in. This parameter defaults to using the default value, which greatly reduces the number of construction parameters used. For example, the new panel can only configure HTML properties except for objects that are rendered. For example: New Ext.panel ({renderto: ' Paneldiv ', HTML: ' content '});
It is important to note that when you pass in the Config object, you must not have more or missing a comma. The object definition format requirements for IE are very strict. The last member of an object cannot end with a comma. Otherwise, JS loading error. For example: New Ext.panel ({renderto: ' Paneldiv ', HTML: ' content ',}); It is possible to pass under FireFox3, but under IE6 it causes an error that cannot be compiled.

The third column is the definition class. Because JavaScript is also an OO syntax, subclasses inherit the properties and methods of the parent class. An inherited property or method with an upward arrow in front of it, usually assuming that a particular function of a class (such as the folding collapse related method of a panel class) is required, it is very convenient to find difined by as the description row for the current class.

Another convenient place for the use of the config options is when the xtype of the config options is specified, when the ExtJS produces the child objects of the container. Can not go to the new object, but only need to pass in the configuration object, in the object to specify Xtype.

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.

Next is the public Properties, which defines the member variables for the object. The ability to access directly through a dot, which is usually a read-only attribute. For example, the following:

There is nothing to say in this section, just look at the explanation in contrast. The only thing to note is the Initialconfig property. The explanation is this

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

This property provides direct access to your initialization object, which saves some var variables, assuming that the object is passed in to 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 method by which the object can be interviewed.


This section, by the way, is the number of parameters. For JavaScript. Its use is more "arbitrary", there is no support for the overload, making it very easy to pass the argument when writing. Therefore, it is important to look at the type of reference, for the ability to use different parameter types. is separated by a/number interval.

For example, the Add method. Expand to see the specific use of each of the parameters, such as after the expansion of the following to illustrate the object parameters:

A Component config object passed in order to avoid the overhead of constructing a real Component object
so that means. The ability to pass a config object directly instead of a Ext.component object. So you can understand. It is also possible to use similar add ({xtype: ' button ', Text: ' Buttons '}).

So, ExtJS's API is the most complete ExtJS tutorial. It's better than whatever the tutorial practice.

Of course. There is also a deeper part of learning. That is to see the ExtJS source code. Look at the ExtJS source code to achieve something more powerful than the API. For example, the Ext.form.Radio in the formlayout in the horizontal.

This depends on the source code.

The next part is also very important. Suppose you want to add the behavior of the ExtJS object, except for the extension object.

The most common is to join the listener.

You will often see some people on the Web writing listener. Instead of knowing how those numbers are used, here's where you're most deserving of learning. That's what's next:

Public Events


For example, the first line of active: (Ext.panel P). so that means. In the listeners of this object. You can listen to this method of active. This method has a parameter p, the incoming object is Ext.panel, usually, assuming that the incoming parameter name is referred to as the current class or its parent class, it refers to the object itself. For example, the name of the 2nd event is very clear: ext.container this. Just do not use, also named variable called this, why? Very Easy,javascriptkeyword Bai.

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 today? If you're not sure, look at 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 an event that is not directly invoked, instead of using the AfterLayout event as a demonstration sample, you can try to access the methods of this object from the panel after the AfterLayout method. You will find that the space that ExtJS gives to the free play is actually very powerful!

ExtJS Event Monitoring, in addition to specifying listeners directly at object creation time, is also able to use the on method to implement dynamic join 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] )

The other point, too, is worth noting. Even though ExtJS's component objects have DOM elements, there are methods supported by DOM elements such as click,resize. But the events of ExtJS are extended.

That is may have added some special methods that ExtJS itself supports. And behavior, may also have a certain difference with the direct DOM call. For example, the Resize method:
Resize: (ext.component This, number adjwidth, number adjheight, number rawwidth, number Rawheight)
The first element is a ExtJS object, and the DOM elements of clear HTML are very different, not confusing.

ExtJS Self-Study tutorial (1): Start with all APIs