Use of ExtJs APIs

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,

The left side is the search bar. You can search for all Ext components. I search for Box components. 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 ):

[Javascript]
01. Ext. onReady (function (){
02. var box = new Ext. BoxComponent ({
03. autoEl :{
04. tag: 'div ',
05. html: 'configuration Item Internal text'
06 .},
07. style: 'background: red; color: # fff ',
08. width: 200,
09. height: 200,
10. renderTo: Ext. getBody ()
11 .});
12 .});
Ext. onReady (function (){
Var box = new Ext. BoxComponent ({
AutoEl :{
Tag: 'div ',
Html: 'configuration Item Internal text'
},
Style: 'background: red; color: # fff ',
Width: 200,
Height: 200,
RenderTo: Ext. getBody ()
});
});

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.

 

[Javascript]
01. Ext. onReady (function (){
02. var box = new Ext. BoxComponent ({
03. autoEl :{
04. tag: 'div ',
05. html: 'configuration Item Internal text'
06 .},
07. style: 'background: red; color: # fff ',
08. width: 200,
09. height: 200,
10. renderTo: Ext. getBody ()
11 .});
12. alert (box. hidden );
13 .});
Ext. onReady (function (){
Var box = new Ext. BoxComponent ({
AutoEl :{
Tag: 'div ',
Html: 'configuration 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.
 

[Javascript]
01. Ext. onReady (function (){
02. var box = new Ext. BoxComponent ({
03. autoEl :{
04. tag: 'div ',
05. html: 'configuration Item Internal text'
06 .},
07. style: 'background: red; color: # fff ',
08. width: 200,
09. height: 200,
10. renderTo: Ext. getBody ()
11 .});
12. alert (box. hidden );
13. box. setWidth (400 );
14. box. setHeight (400 );
15 .});
Ext. onReady (function (){
Var box = new Ext. BoxComponent ({
AutoEl :{
Tag: 'div ',
Html: 'configuration Item Internal text'
},
Style: 'background: red; color: # fff ',
Width: 200,
Height: 200,
RenderTo: Ext. getBody ()
});
Alert (box. hidden );
Box. setWidth (400 );
Box. setHeight (400 );
});

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.

 

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

[Javascript]
01. Ext. onReady (function (){
02. var box = new Ext. BoxComponent ({
03. autoEl :{
04. tag: 'div ',
05. html: 'configuration Item Internal text'
06 .},
07. style: 'background: red; color: # fff ',
08. width: 200,
09. 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 .});
Ext. onReady (function (){
Var box = new Ext. BoxComponent ({
AutoEl :{
Tag: 'div ',
Html: 'configuration Item Internal text'
},
Style: 'background: red; color: # fff ',
Width: 200,
Height: 200,
RenderTo: Ext. getBody (),
Listeners :{
'Beforerender': function (){
Alert ('beforerender ');
}
}
});
Alert (box. hidden );
Box. setWidth (400 );
Box. setHeight (400 );
});

5. the API lists the relationships between components,

 

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