ExtJs getting started tutorial 19 [API usage]

Source: Internet
Author: User

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

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.