extjs 列表框(multiselect)的動(dòng)態(tài)添加列表項(xiàng)的方法

更新時(shí)間：2009年07月31日 15:01:47 作者：

最近公司一個(gè)項(xiàng)目,因?yàn)橐褂胐iv模擬的窗口,因?yàn)榫寐別xtjs的大名,因此就想在項(xiàng)目中使用一下.首先下載了multiselect的extjs3.0 demo.看到的代碼這里我就不粘貼了.

因?yàn)樗@個(gè)是創(chuàng)建時(shí)自動(dòng)加載的ArrayStore(關(guān)鍵字是:data: ds),沒有動(dòng)態(tài)增加的示例,但我們的項(xiàng)目需要有三個(gè)列表框,并且后兩個(gè)的內(nèi)容要根據(jù)第一個(gè)列表框內(nèi)容動(dòng)態(tài)的加載,因此要在選擇第一個(gè)列表框的內(nèi)容時(shí),動(dòng)態(tài)填充后兩個(gè)的內(nèi)容.我比較佩服exjts的示例寫作人員,這些應(yīng)該在示例中體現(xiàn)的功能，他們都沒有寫到,包括之前的2.2版本的示例,網(wǎng)上也沒有搜索到,害我找了一天如何動(dòng)態(tài)控制列表數(shù)據(jù)的功能.首先說明一下，我的方法也不是官方的方法，只是自己靈機(jī)一動(dòng)想到的,下面是動(dòng)態(tài)增加列表項(xiàng)的方法.
在方法之前我的關(guān)于multiselect對(duì)象的store是這樣定義的:

復(fù)制代碼代碼如下:

flowDs = new Ext.data.ArrayStore({ 
data: [[123,123]], 
fields: ['value','text'] 
}); 

(1)var toflowStore = msForm.getForm().findField('toflow').store; //根據(jù)名稱得到multiselect對(duì)象的store對(duì)象;
(2)創(chuàng)建一個(gè)Ext.data.Record對(duì)象,這正在我想了好久的增加方法,也怪自己太笨了:

復(fù)制代碼代碼如下:

var record = new Object(); 
record.value = "2"; 
record.text = "3"; 
var records = new Ext.data.Record(record); 

(3) 將創(chuàng)建的Ext.data.Record對(duì)象加至multiselect的store對(duì)象中:
toflowStore.add(record1);
通過以上三步就可以為列表multisleect動(dòng)態(tài)增加列表項(xiàng)了,提醒一下刪除某項(xiàng)可以通過remove()/removeAll()方法,具體的使用方法可以通過示例代碼的ItemSelector.js中查到.
通過以上分析后,大致可以簡單估計(jì)到multiselect的創(chuàng)建規(guī)則,在store中有一個(gè)屬性fields: ['value','text'],則在創(chuàng)建時(shí),系統(tǒng)會(huì)通過循環(huán)的方式將屬性data:[[123,123]]中的內(nèi)容創(chuàng)建為object對(duì)象,然后寫到時(shí)它的store對(duì)象中,類似下面的代碼:

復(fù)制代碼代碼如下:

var item = [],itemObj,record; 
for(var i = 0; i< this.data.length;i++){ 
item = this.data[i]; 
itemObj = new Object(); 
itemObj.value = item[0]; 
itemObj.text = item[1]; 
record = new Ext.data.Record(itemObj); 
this.store.add(record); 
} 

以上只是我腓臆的猜測，具體extjs的工程師是不是如此設(shè)計(jì)他們的程序，還沒有仔細(xì)研究.

您可能感興趣的文章: