No crap ExtJS Getting Started tutorial 19 [API Usage]

No crap ExtJS Getting Started tutorial 19 [API Usage]extjs Technical Exchange, welcome Dabigatran (201926085)

First explain what the API

Official explanation from Baidu Encyclopedia: API (Application Programming Interface, Application programming Interface) is a pre-defined function designed to provide applications and developers the ability to access a set of routines based on a software or hardware without having to access the source code , or to understand the details of the internal working mechanism.

The ExtJS API must be deployed to IIS, as shown in the ExtJS API home page:

On the left is the search bar, you can search all the ext components, as shown, I am searching for box, the following automatically triggered the search out the component containing box.

Properties: Property. Methods: Method. Events: Event. Config options: Configuration items. Direct link links.

1,config Options (Configuration items):

1         ext.onready (function () {2             var box = new Ext.boxcomponent ({3                 Autoel: {4                     tag: ' Div ', 5                     HTML: ' Config item Section text ' 6                 }, 7                 style: ' Background:red;color: #fff ', 8                 width:200, 9                 height:200,10                 Renderto: Ext.getbody ()             });         

As shown above: Style,width,height,renderto,autoel is a configuration item: The contents of the JSON object that we passed in when we created a new component.

Let's take the Autoel attribute as an example:

,

In the list page of the API, just a brief description of the configuration item, click on the source code page to see detailed instructions, there will be specific instructions and use instances, as follows:

2,properties: A property is a value that can be taken from an object after we create it.

  Ext.onready (function () {            var box = new Ext.boxcomponent ({                Autoel: {                    tag: ' div ',                    html: ' config-item inner text '                },                style: ' Background:red;color: #fff ',                width:200,                height:200,                renderTo:Ext.getBody ()            });            alert (Box.hidden);        });

The Alert method above pops false.

3.Methods: Method.

As shown above: parentheses are the parameters required by the method, followed by the return value type after the colon, the object type is typically a JSON object

1         ext.onready (function () {2             var box = new Ext.boxcomponent ({3                 Autoel: {4                     tag: ' Div ', 5                     HTML: ' Config item Section text ' 6                 }, 7                 style: ' Background:red;color: #fff ', 8                 width:200, 9                 height:200,10                 Renderto: Ext.getbody () one             });             alert (Box.hidden); Box.setwidth (+             );             box.setheight (400); 15         });

I adjusted the width and height of box to 400 by SetWidth method and SetHeight method.

4.Events: Event that occurs when a component has a change in action. Like what:

Let's take the beforerender[component pre-render event] as an example to monitor the event:

1  ext.onready (function () {2             var box = new Ext.boxcomponent ({3                 Autoel: {4                     tag: ' Div ', 5                     HTML: ' Config item Section text ' 6                 }, 7                 style: ' Background:red;color: #fff ', 8                 width:200, 9                 height:200,10                 Renderto: Ext.getbody (),                 listeners: {                     BeforeRender ': function () {                         alert (' BeforeRender '),                     }15                 }16             });             alert (Box.hidden);             box.setwidth (+);             box.setheight (         +);

5.API Luo lists the relationships among the components, such as:

Defined in: Defined in Boxcomponent.js

Class: Category name

Subclasses: The subclass that exists, in other words, the classes listed above, such as Button inheritance Boxcomponent

Extends: The meaning of inheritance. Description Boxcomponent inherited from Component

Xtype:box defines xtype as ' box '

6. Properties, methods, events also exist inheritance

As shown, deifned by .... Many of the configuration items in boxcomponent are defined in Component, because Boxcomponent inherits from Component.

Reprint Please specify source: Http://www.cnblogs.com/iamlilinfeng

No crap ExtJS Getting Started tutorial 19 [API Usage]