無廢話ExtJs 入門教程十九[API的使用]

朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股　，這是他每天的日志，有些經驗是花錢也買不到的。

首先解釋什么是 API

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

ExtJs的Api必須部署到IIS上，ExtJS的API首頁如下圖所示：

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

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

1，Config Options(配置項)：

        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：屬性是我們創建對象以后，能通過該對象取到的值的。

  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：方法.

如上所示：括號內是方法需要的參數，冒號后是返回值類型,Object類型一般為 json 對象

        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[組件渲染前事件] 為例，對該事件做監聽：

 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.屬性，方法，事件也存在繼承

如上圖所示，Deifned By....在BoxComponent的配置項中有很多都是定義在 Component 中，原因也是由於BoxComponent繼承自Component。

 轉載請注明出處：http://www.cnblogs.com/iamlilinfeng