Ext2.0本地模式动态修改combobox选择项
时间:2011-02-09
在很多时候，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%''
})
Ext2.0本地模式动态修改combobox选择项(2)
时间:2011-02-09
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++)
|
