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]