ExtJs API的使用

首先解釋什麼是 API

來自百度百科的官方解釋：API（Application Programming Interface,API）是一些預先定義的函數，目的是提供應用程式與開發人員基於某軟體或硬體的以訪問一組常式的能力，而又無需訪問源碼，或理解內部工作機制的細節。

ExtJs的Api必須部署到IIS上，

左側是搜尋欄，可以搜尋所有的Ext的組件 我搜尋的是Box，下面自動觸發搜尋出了包含Box的組件。

 

Properties：屬性。Methods：方法。Events：事件。Config Options：配置項。Direct Link連結。

1，Config Options(配置項)：

[javascript] 
01.Ext.onReady(function () { 
02.             var box = new Ext.BoxComponent({ 
03.                 autoEl: { 
04.                     tag: 'div', 
05.                     html: '配置項內部文本' 
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: '配置項內部文本'
                 },
                 style: 'background:red;color:#fff',
                 width: 200,
                 height: 200,
                 renderTo: Ext.getBody()
             });
         });

如上所示：style,width,height,renderTo,autoEl都屬於配置項，即：我們在建立一個新的組件的時候傳入的 json 對象的內容。

我們以 autoEl 屬性為例操作一下：

,

在Api的列表頁中只對該配置項進行了簡單說明，點擊後進入 source code 頁面查看詳細說明，裡面會有具體的說明和使用執行個體，如下所示：

 

 2，Properties：屬性是我們建立對象以後，能通過該對象取到的值的。

 

[javascript] 
01.Ext.onReady(function () { 
02.            var box = new Ext.BoxComponent({ 
03.                autoEl: { 
04.                    tag: 'div', 
05.                    html: '配置項內部文本' 
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: '配置項內部文本'
                },
                style: 'background:red;color:#fff',
                width: 200,
                height: 200,
                renderTo: Ext.getBody()
            });
            alert(box.hidden);
        });

上面alert方法彈出 false。

3.Methods：方法.
 

[javascript] 
01.Ext.onReady(function () { 
02.             var box = new Ext.BoxComponent({ 
03.                 autoEl: { 
04.                     tag: 'div', 
05.                     html: '配置項內部文本' 
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: '配置項內部文本'
                 },
                 style: 'background:red;color:#fff',
                 width: 200,
                 height: 200,
                 renderTo: Ext.getBody()
             });
             alert(box.hidden);
             box.setWidth(400);
             box.setHeight(400);
         });

我通過 setWidth方法和setHeight方法，把box的寬和高調整為  400。

4.Events：事件，當某個組件發生動作的變化時會引發的事。

 

下面我們以 beforerender[組件渲染前事件] 為例，對該事件做監聽：

[javascript] 
01.Ext.onReady(function () { 
02.             var box = new Ext.BoxComponent({ 
03.                 autoEl: { 
04.                     tag: 'div', 
05.                     html: '配置項內部文本' 
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: '配置項內部文本'
                 },
                 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.API羅列出各組件之間的關係，

 

Defined In ：定義在 BoxComponent.js 中

Class：類名

Subclasses：存在的子類，換句話說就是，上面列出的類，如 Button 等繼承 BoxComponent

Extends：繼承的意思。說明BoxComponent 繼承自 Component

xtype: box 定義 xtype為'box'

6.屬性，方法，事件也存在繼承