寫在前面
之前有在ExtJS初體驗(yàn)中說了ExtJs給我們項(xiàng)目開發(fā)帶來了很多便利机打，有童鞋在下面留言問extjs的API該怎么看逸雹？很多剛?cè)腴T的童鞋被ExtJs里各種龐大的控件弄暈了豺旬，不知道怎么看api。那么這篇我就簡(jiǎn)單地說下extjs的api該怎么看忘古。
ExtJs的api文檔該怎么看
如果想在本地查看extjs的api振湾，大家自行下載解壓查看即可硝训，查看方法網(wǎng)上很多科平，不再贅述锨匆。這里我們直接看extjs的在線官方文檔：Ext JS 6.0.0 - Modern Toolkit ,界面如下：
API中私痹，都是針對(duì)每個(gè)類來講解的，每個(gè)類中又基本上都由以下4部分組成：
Config Options , 配置項(xiàng)
Public Properties, 公共屬性
Public Methods, 公共方法
Public Events, 公共事件
1.Config Options
Config Options下的內(nèi)容為你在實(shí)例化一個(gè)對(duì)象時(shí)進(jìn)行配置的, 這個(gè)所謂的配置選項(xiàng)统刮，也就是Config Options下的內(nèi)容紊遵，只有你在實(shí)例化的時(shí)候用的，也就是你在new 類名({…})時(shí)用的侥蒙。下面以Panel類寫個(gè)例子說明：
var subsys_grid = Ext.create('Ext.grid.Panel', {
title:'子系統(tǒng)列表',
region:'west',
width:300,
columnLines : true,
striped : true,
store : subsys_store,
selModel:sub_selModel,
columns : [ {
xtype : 'rownumberer'
}, {
text : '編號(hào)',
dataIndex : '編號(hào)',
sortable:false,
hideable : false,
flex : 1
}, {
text : '名稱',
dataIndex : '名稱',
sortable:false,
hideable : false,
flex : 1
}, {
text : '描述',
dataIndex : '描述',
sortable:false,
hideable : false,
flex : 1
}]
});
Ext.create方法中傳入了兩個(gè)參數(shù)暗膜，第一個(gè)是控件的類名或別名，第二個(gè)參數(shù)就是該控件的配置項(xiàng)了鞭衩。
我們?cè)谂渲庙?xiàng)中找到了region和width学搜，試試對(duì)Panel的作用。將此兩項(xiàng)改成如下：
region:'east',
width:500,
運(yùn)行后论衍，會(huì)明顯的發(fā)現(xiàn)標(biāo)題叫"子系統(tǒng)列表'"的Panel的位置和寬度發(fā)生明顯的變化瑞佩。
2.Public Properties
Public Properties定義了對(duì)象的成員變量，表示的是你從一個(gè)實(shí)例化對(duì)象里取得的屬性坯台【嫱瑁可以直接通過點(diǎn)號(hào)來訪問的，通常該部分都是只讀的屬性蜒蕾。比如上面的例子實(shí)例化了一個(gè)對(duì)象subsys_grid 稠炬，那么現(xiàn)在你可以取實(shí)例化對(duì)象的數(shù)據(jù)了。比如：subsys_grid.title就能取得Panel的標(biāo)題咪啡。該部分沒什么好說的首启，對(duì)照著看說明就是了
3.Public Methods
該部分定義了對(duì)象的能夠被訪問的公開方法。
比如add方法撤摸，**add ( newItems ) : Ext.Component / Ext.Component[] **,它的參數(shù)及返回值說明如下：
由上圖可以看出毅桃，add方法可以接受一個(gè)對(duì)象/對(duì)象數(shù)組/組件/組件數(shù)組的參數(shù)，返回的可以是組件或者組件數(shù)組准夷。
我們展開add方法有如下example：
var myPanel = Ext.create('Ext.Panel', {
html: 'This will be added to a Container'
});
var items = myContainer.add([myPanel]); // Array returned
var item = myContainer.add(myPanel); // One item is returned
該例子表示的是將一個(gè)或多個(gè)組件添加到該容器中钥飞。
4.Public Events
這里以activate ( newActiveItem , this , oldActiveItem , eOpts ) 方法為例，在這個(gè)對(duì)象的listeners里冕象，你可以監(jiān)聽active這個(gè)方法代承，這個(gè)方法有四個(gè)參數(shù)汁蝶，注意：:第二個(gè)參數(shù)Ext.Container this渐扮，不要在使用時(shí)论悴，也命名變量叫this，因?yàn)樗莏avascript的關(guān)鍵字墓律。
該事件的發(fā)生條件：Fires whenever item within the Container is activated.
直譯為：每當(dāng)容器內(nèi)的對(duì)象被激活時(shí)膀估，將觸發(fā)改事件。
ExtJs的事件監(jiān)聽耻讽，除了直接在對(duì)象創(chuàng)建時(shí)指定listeners外察纯，還可以在對(duì)象創(chuàng)建后用on方法來實(shí)現(xiàn)動(dòng)態(tài)的添加。例如：
var sub_selModel = Ext.create('Ext.selection.CheckboxModel', {
mode:'SINGLE'
});
var subCode_v = '';
sub_selModel.on('selectionchange', function(m, selected, eOpts) {
subCode_v = '';
if (selected.length > 0) {
Ext.getCmp('addtodo').setDisabled(false);
var code = selected[0].data.編號(hào);
var name = selected[0].data.名稱;
subCode_v = code;
todo_store.proxy.extraParams={sub_sys:code}
todo_store.load();
}
});
寫在最后
對(duì)于ExtJs的api文檔针肥，只要有點(diǎn)英文基礎(chǔ)饼记，掌握基本的用法，平時(shí)多加應(yīng)用慰枕，Extjs終會(huì)成為你的一本快速開發(fā)的武林秘籍 具则。
了解更多:
Sencha中文站
