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

Preface

This series of articles on the side of the full-scale to introduce the use of ExtJS, only the side of the problem to solve the extjs of the thinking method. Those who write do not have to be lengthy, and those who learn can be self-reliant. L
The learners only need to have some basic knowledge of CSS JavaScript and not very poor English (in order to help the word bully can read the ExtJS API), you 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 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 can be very smooth with extjs solve this problem 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 make clear a truth: the so-called development master, solve this 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, fall into the ordinary hands of the general is 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

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

Assuming that you downloaded the ExtJS have these non-empty folders, congratulations, at least 80% may prove that you download this ExtJS 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, and then point the Web root folder to ExtJS's unzip folder, for example: 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



On the left side of the tree, the tab on the right can be added to the label of the class, and the information for that class is displayed within the page. The panel is proportional to the following:



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 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. 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. For example, the new Panel can only configure HTML properties, such as New Ext.panel ({renderto: ' Paneldiv ', HTML: ' content '), in addition to the object being rendered;
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 syntax of OO, so 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 that when the xtype of the config options is specified, the EXTJS generates the container's sub-objects without having to go to the new object and simply passes in the configuration object. You can 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.

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 "arbitrary" and there is no support for overload, which makes it extremely easy to get a wrong number of passes when writing. Therefore, we need to pay attention to the type of reference, for the ability to use different parameter types, between the use of/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 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, suppose to add? The behavior of the ExtJS object, in addition to the extension object. The most common is to join? listening. You'll often see some people on the Web writing listener, without knowing how those numbers 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 active this method, this method has a parameter p, The incoming object is Ext.panel, which is usually assumed to refer to the object itself, such as the name of the 2nd event, if the passed-in name is called the current class or its parent class: 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, so instead of using the AfterLayout event to do a demo sample, you can try to access the method in the AfterLayout method with a panel to ask you about the new object. You will find that the space that ExtJS gives to the free play is actually very powerful! The


  extjs event Listener, in addition to specifying listeners directly on object creation, can also use the on method to implement dynamic join after object creation. The API says:
On (String eventName, Function handler, [object scope], [object options])
does not want to listen and can be removed with UN:
un (  String EventName, Function handler, [object scope]  )

   another point, It is also 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, there may be some special methods that are added to ExtJS's own support, and the behavior may differ from 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.