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 the basics of JavaScript in CSS and do not have very bad English (in order to help PowerWord can understand ExtJS API any). You can refer to the practice of this tutorial.

"One" starts with all APIs

Learn ExtJS friends in the beginner ExtJS think ExtJS very easy effect is very good. A few lines of code will get the effect done. But the use of more, complaining 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 there are a lot of people who can solve this problem very smoothly with ExtJS, so. Don't complain about sour grapes, want to improve, still have to settle down sit down to see the post:)

Before studying, we must first make clear one truth: the so-called development master. It is natural to solve this problem faster than ordinary people. Apart from experience. The most important aspect of the ability is to find information faster than ordinary people.

Like a martial arts cheats, fall into the hands of ordinary people are generally not much use, to "high-skilled" to help. Learn some "internal internal heart Heart" first. For ExtJS, "Martial arts Cheats" is the ExtJS API documentation. So. Learn ExtJS. First you have to learn how to look at the API. So, the first step. is to learn how to look at ExtJS's 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. The other 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. To build your own ext-all.js.
Resources ExtJS perform the required resource files, including icons and CSS for these

Assume that the ExtJS you downloaded has these non-empty folders. Congratulations to you. 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 decompression folder, such as: D:/ext-2.0.2,port in 80 execution. 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



The left tree is clicked upon. The tabs on the right can add tags to the class and display information about the class within 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), 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 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.

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. Expand to show the description of the parameter, note that the config options have a lot of parameters that have the default property, that is. In new, the argument objects does not pass in the argument, which defaults to using the default value, which greatly reduces the number of construction parameters used. Like a new panel. In addition to specifying the rendered object. Ability to configure only HTML properties. 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 of IE is very strict, the last member of the object cannot end with a comma, otherwise the JS load 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 the OO syntax. The subclass also inherits the properties and methods of the parent class. An inherited property or method preceded by an upward arrow is usually assumed to look at a particular function of a class (such as a method of folding collapse related to a panel class). You need to find difined by as the description line for the current class. This is very convenient.

For the use of the config options. Another convenient place is when you specify the xtype of the config options. When ExtJS generates a child object for a 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. Like what. 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. Suppose it is an object that passes in 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 "arbitrary", there is no support for overload, making it very easy to pass in 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 can be expanded 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
That is to say, a Config object can be directly passed in instead of a Ext.component object.

This way you can understand that it is possible to use similar add ({xtype: ' button ', Text: ' Buttons ').

So, ExtJS's API is the most complete ExtJS tutorial, and it's better than any tutorial exercise or anything. Of course, there is also a deeper part of learning. That is to see ExtJS source code, see ExtJS Source code can achieve some of the more powerful than the API, for example, Formlayout Ext.form.Radio 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), then that is. In the listeners of this object, you can listen to this method of active. This method has a parameter p, and the incoming object is Ext.panel. In general, assuming that the passed-in name is referred to as the current class or its parent, it means the object itself, such as the name of the 2nd event, which 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 means that the object becomes visible and active. Will trigger the event.


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 a non-directly invoked event. So instead of using the AfterLayout event as a demo sample, you can try to access the method 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] )

Another point. It is also worth noting. Even though the ExtJS component the object comes with DOM elements, there are DOM methods, such as those supported by the component Click,resize. But ExtJS the event is an extension. In other words, you can join ExtJS to support some special methods, and behaviors. It can also be a direct DOM call with certain differences, such as 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