看懂ExtJS的API

ExtJS的功能很強大，相應的其API也很龐大，並且看起來並不是很輕鬆。首先是純英文的東西，大腦的第一反應就有點遲鈍，然後是整頁整頁的配置、屬性、方法、事件等，看上去真的可謂是眼花繚亂。所以本文的目的就是告訴大家如何輕鬆的看懂ExtJS的API。

進入API文檔

當你下載了ExtJS之後，不妨在IIS中為ExtJS建立一個網站，訪問該網站的首頁，你會看到如下的頁面：

點擊API Docs進入ExtJS的API文檔。

定位你的目標

進入API後，你會看到如下介面：

這個頁面中，左側是一個導覽列，頂部有一個搜尋方塊，剩下的就是一個內容部分了。通過導覽列可以快速的找到我們要查看的內容，而頂部的搜尋方塊則可以為我們提供全域的搜尋功能，方便我們在目標不明確的時候找到內容。

詳細的頁面元素說明

  在頁面的上方，我們可以看到有一個表徵圖指示該類是一個單例類還是一個組件。如果是一個組件，那麼就會顯示xtype屬性。（一定要分清哪個是類，哪個是組件哦，不然以後使用起來就麻煩許多了）

  在類名下面會根據具體類的情況顯示如下功能表項目：Configs、Properties、Methods、Events、Super Classes和Sub Classes。接著還有一個搜尋方塊，可通過它來查詢該類的特定屬性、配置項、方法等等。

  對於某些類的描述，API文檔中會列出一些執行個體，並且某些執行個體提供了即時預覽的功能，方便我們查看代碼執行效果。

  在頁面的右邊，會展現類的Alternate Names、Hierarchy和Mixns的資訊。

  當大家開啟API文檔時會發現有些方法被標記為deprecate，就是說這些方法已被棄用了。

  在API文檔的右上方我們可以看到一個搜尋方塊，通過它可以在整份文檔中搜尋特定的類、方法、配置項、屬性、事件、組合。

  當然API文檔還提供了官方的guides文檔，讓大家更容易入手Ext。

<本段內容摘自：http://www.cnblogs.com/fsjohnhuang/archive/2013/01/29/2880705.html>

使用配置項

在Button 範例程式碼中，我們看到建立Button的代碼如下：

Ext.create('Ext.Button', {    text: 'Click me',    renderTo: Ext.getBody(),    handler: function () {        alert('You clicked the button!');    }});

 

Ext.create方法中傳入了兩個參數，第一個是控制項的類名或別名，第二個參數就是該控制項的配置項了。

我們在configs中找到了width和height，試試對Button的作用。在配置中加入這兩項：

width: 100,height: 30,

然後運行，看看我們得到的Button樣式：

添加事件

Button的事件可以通過handler配置項來添加click事件，但Button的其它事件就不能這樣處理了。要為Button添加更多的事件，需要在配置想中添加listener，Button的真正用到的事件不多，我這裡以TreePanel為例（其實所有控制項都是這樣添加事件的）

var treePanel = Ext.create('Ext.tree.Panel', {    title: '',    width: 200,    height: 300,    store: treeStore,    rootVisible: true,    useArrows: true,    lines: true,    listeners: {        render: function (self, opts) {            alert('render');        },        afterrender: function (self, opts) {            alert('afterrender');        },        activate: function (self, opts) {            alert('activate');        }    },    renderTo: 'tree'});

這裡為TreePanel添加了三個事件。

如果要在代碼中條件性的添加或刪除事件，那就用到Method了。

調用Method

接著上面的範例程式碼，如果要通過代碼為TreePanel添加或移除select事件，我們就可以通過Methods尋找相應的方法，我這裡直接給出代碼：

//select事件處理函數var selectHandler = function () {    alert('select event');}//添加select事件treePanel.on('select', selectHandler, treePanel);//移除select事件treePanel.un('select', selectHandler, treePanel);

 

小結：有句老話叫做“書讀百遍……”道理很樸實，只要你堅持的看下去，就一定能夠熟練的閱讀ExtJS 的API文檔。如果還有那裡不懂，請留言或私信聯絡，共同學習。