快捷導(dǎo)航

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

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

最近公司一個項目,因為要使用div模擬的窗口,因為久聞extjs的大名,因此就想在項目中使用一下.首先下載了multiselect的extjs3.0 demo.看到的代碼這里我就不粘貼了.

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

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

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

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

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

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

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

復(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è)計他們的程序，還沒有仔細(xì)研究.

您可能感興趣的文章: