在很多時候，combobox的選擇項已經下載到本地，只是存儲方式不同，我們就需要動態修改combobox的選擇項。例如有一顆樹，樹的節點就是combobox的選項，在Ext2.0中樹的存儲格式不是使用store的，而combobox必須使用store，這就需要進行數據轉換。本文就以此作為例子，研究一下如何動態修改combobox的選擇項。
我們先創建一個帶幾個選項的樹：
var root = new Ext.tree.TreeNode({
text: '選項',
allowDrag:false,
allowDrop:false
});
root.appendChild(
new Ext.tree.TreeNode({id:1,text:'選項一',allowDrag:false}),
new Ext.tree.TreeNode({id:2,text:'選項二',allowDrag:false}),
new Ext.tree.TreeNode({id:3,text:'選項三',allowDrag:false}),
new Ext.tree.TreeNode({id:4,text:'選項四',allowDrag:false})
);
var tree=new Ext.tree.TreePanel({
style:'margin:20px 0 0 20px',
title:'選項列表',
width: 200,
height:300,
root:root
})
tree.render(document.body);
root.expand();
代碼裡先創建了一個樹節點root，這個將作為樹的根節點，然後加入了id分別為1、2、3、4的子節點，這4個子節點就是combobox選擇項，id是combobox的提交值，text是顯示值。
下面創建一個combobox，：
var combo=new Ext.form.ComboBox({
valueField :"id",
displayField: "text",
store:new Ext.data.SimpleStore({
fields: ["id", "text"],
data: []
}),
mode: 'local',
blankText:'請選擇',
emptyText:'請選擇',
hiddenName:'testhide',
fieldLabel: '測試',
name: 'test',
anchor:'90%'
})
combobox使用了SimpleStore作為它的sotre，SimpleStore定義了id和text兩個字段，id作為combobox的值字段（valueField :"id"），text作為combobox的顯示字段（displayField: "text"）。Combobox的操作模式是本地模式（mode: 'local'）。
下面創建一個formpanel，將combobox放到formpanel裡。還定義一個“改變選項”按鈕來改變combobox的選擇項。
var simpleForm = new Ext.FormPanel({
labelAlign: 'left',
title: '動態修改combobox選擇項例子',
buttonAlign:'center',
bodyStyle:'padding:5px',
style:'margin:20px 0 0 20px;',
width: 600,
frame:true,
labelWidth:80,
items: [combo],
buttons:[{
text:'改變選項',
handler:function(){
var data=[];
combo.clearValue();
for(var i=0;i<root.childNodes.length;i++){
var node=root.childNodes[i];
data.push([node.id,node.text]);
}
combo.store.loadData(data);
}
}]
});
simpleForm.render(document.body);
我們先來測試一下頁面。頁面加載完後，combobox是沒有選擇項的，我們單擊“改變選項”按鈕，就有選擇項了。
我們來分析一下按鈕的單擊事件：
1 var data=[];
2 combo.clearValue();
3 for(var i=0;i<root.childNodes.length;i++){
4 var node=root.childNodes[i];
5 data.push([node.id,node.text]);
6 }
7 combo.store.loadData(data);
在第1行，首先定義了一個空數組data。在第2行清理combobox的值狀態，避免當前選擇值不存在，不過你也可以保留，不執行這句。第3和6行通過一循環，遍歷樹根節點root的子節點，第4行取得一個子節點，在第5行將子節點的id和text組成一個數組增加到data數組中。在第7行將數據加載到combobox的store中。
是不是很簡單？呵呵。希望本文能給大家一下幫助，多謝！
本文的完整代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>動態修改combobox選擇項例子</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
</head>
<body>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
var root = new Ext.tree.TreeNode({
text: '選項',
allowDrag:false,
allowDrop:false
});
root.appendChild(
new Ext.tree.TreeNode({id:1,text:'選項一',allowDrag:false}),
new Ext.tree.TreeNode({id:2,text:'選項二',allowDrag:false}),
new Ext.tree.TreeNode({id:3,text:'選項三',allowDrag:false}),
new Ext.tree.TreeNode({id:4,text:'選項四',allowDrag:false})
);
var tree=new Ext.tree.TreePanel({
style:'margin:20px 0 0 20px',
title:'選項列表',
width: 200,
height:300,
root:root
})
tree.render(document.body);
root.expand();
var combo=new Ext.form.ComboBox({
valueField :"id",
displayField: "text",
store:new Ext.data.SimpleStore({
fields: ["id", "text"],
data: []
}),
mode: 'local',
blankText:'請選擇',
emptyText:'請選擇',
hiddenName:'testhide',
fieldLabel: '測試',
name: 'test',
anchor:'90%'
})
var simpleForm = new Ext.FormPanel({
labelAlign: 'left',
title: '動態修改combobox選擇項例子',
buttonAlign:'center',
bodyStyle:'padding:5px',
style:'margin:20px 0 0 20px;',
width: 600,
frame:true,
labelWidth:80,
items: [combo],
buttons:[{
text:'改變選項',
handler:function(){
var data=[];
combo.clearValue();
for(var i=0;i<root.childNodes.length;i++){
var node=root.childNodes[i];
data.push([node.id,node.text]);
}
combo.store.loadData(data);
}
}]
});
simpleForm.render(document.body);
});
</script>
</body>
</html>
單擊這裡可下載本問例子。
注：這次只單獨打包了本例子的html文件，大家注意一下js和css的路徑就可以了。
