No crap ExtJS Getting Started tutorial 19 [API Usage]

Source: Internet
Author: User

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]

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.