ExtJs getting started tutorial 19 [API usage]

What is API first

Official explanation from Baidu Baike: API (Application Programming Interface) is a number of pre-defined functions, the purpose is to provide applications and developers with the ability to access a group of routines based on a software or hardware without accessing the source code or understanding the details of the internal working mechanism.

ExtJs APIs must be deployed on IIS. Shows the homepage of ExtJS APIs:

On the left side is the search bar. You can search for all Ext components, as shown in. I searched for Box. The following automatically triggers the search for Components Containing Box.

Properties: Properties. Methods: method. Events: event. Config Options: configuration item. Direct Link.

1. Config Options ):

1 Ext. onReady (function () {2 var box = new Ext. boxComponent ({3 autoEl: {4 tag: 'div ', 5 html: 'item internal text '6}, 7 style: 'background: red; color: # fff ', 8 width: 200, 9 height: 200,10 renderTo: Ext. getBody () 11}); 12 });

 

As shown above: style, width, height, renderTo, and autoEl all belong to the configuration items, that is, the content of the json object imported when we create a new component.

Take the autoEl attribute as an example:

,

On the Api list page, you can only briefly describe the configuration item. Click it to go to the source code page and view the detailed description. The detailed description and examples are displayed, as shown below:

2. Properties: Properties are the values that can be obtained from the object after the object is created.

Ext. onReady (function () {var box = new Ext. boxComponent ({autoEl: {tag: 'div ', html: 'item internal text'}, style: 'background: red; color: # fff', width: 200, height: 200, renderTo: Ext. getBody ()}); alert (box. hidden );});

The above alert method prompts false.

3. Methods: method.

As shown in the preceding figure: the parameters required by the method are in parentheses, And the return value type is after the colon. The Object type is generally a json Object.

1 Ext. onReady (function () {2 var box = new Ext. boxComponent ({3 autoEl: {4 tag: 'div ', 5 html: 'item internal text '6}, 7 style: 'background: red; color: # fff ', 8 width: 200, 9 height: 200,10 renderTo: Ext. getBody () 11}); 12 alert (box. hidden); 13 box. setWidth (400); 14 box. setHeight (400); 15 });

By using the setWidth and setHeight methods, I adjust the width and height of the box to 400.

4. Events: Events that occur when an action of a component changes. For example:

The following uses beforerender [component pre-rendering event] as an example to listen to this event:

1 Ext. onReady (function () {2 var box = new Ext. boxComponent ({3 autoEl: {4 tag: 'div ', 5 html: 'item internal text '6}, 7 style: 'background: red; color: # fff ', 8 width: 200, 9 height: 200,10 renderTo: Ext. getBody (), 11 listeners: {12 'beforerender': function () {13 alert ('beforerender'); 14} 15} 16}); 17 alert (box. hidden); 18 box. setWidth (400); 19 box. setHeight (400); 20 });

5. the API lists the relationships between components, such:

Defined In: Defined In BoxComponent. js

Class: Class Name

Subclasses: an existing subclass. In other words, the classes listed above, such as buttons, inherit from BoxComponent.

Extends: Meaning of inheritance. Description: BoxComponent inherits from Component.

Xtype: box defines xtype as 'box'

6. Inheritance of attributes, methods, and events

As shown in, Deifned By... many of the configuration items in BoxComponent are defined in Component, because BoxComponent inherits from Component.

Reprinted please indicate the source: http://www.cnblogs.com/iamlilinfeng