您的位置：首页 > 其它

Ext2.0本地模式动态修改combobox选择项

2007-10-07 17:32 337 查看
在很多时候，combobox的选择项已经下载到本地，只是存储方式不同，我们就需要动态修改combobox的选择项。例如有一颗树，树的节点就是combobox的选项，在Ext2.0中树的存储格式不是使用store的，而combobox必须使用store，这就需要进行数据转换。本文就以此作为例子，研究一下如何动态修改combobox的选择项。
我们先创建一个带几个选项的树：

varroot=newExt.tree.TreeNode({
text:'选项',
allowDrag:false,
allowDrop:false
});

root.appendChild(
newExt.tree.TreeNode({id:1,text:'选项一',allowDrag:false}),
newExt.tree.TreeNode({id:2,text:'选项二',allowDrag:false}),
newExt.tree.TreeNode({id:3,text:'选项三',allowDrag:false}),
newExt.tree.TreeNode({id:4,text:'选项四',allowDrag:false})
);

vartree=newExt.tree.TreePanel({
style:'margin:20px0020px',
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，：

varcombo=newExt.form.ComboBox({
valueField:"id",
displayField:"text",
store:newExt.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的选择项。

varsimpleForm=newExt.FormPanel({
labelAlign:'left',
title:'动态修改combobox选择项例子',
buttonAlign:'center',
bodyStyle:'padding:5px',
style:'margin:20px0020px;',
width:600,
frame:true,
labelWidth:80,
items:[combo],
buttons:[{
text:'改变选项',
handler:function(){
vardata=[];
combo.clearValue();
for(vari=0;i<root.childNodes.length;i++){
varnode=root.childNodes[i];
data.push([node.id,node.text]);
}
combo.store.loadData(data);
}
}]
});

simpleForm.render(document.body);
我们先来测试一下页面。页面加载完后，combobox是没有选择项的，我们单击“改变选项”按钮，就有选择项了。
我们来分析一下按钮的单击事件：

1vardata=[];
2combo.clearValue();
3for(vari=0;i<root.childNodes.length;i++){
4varnode=root.childNodes[i];
5data.push([node.id,node.text]);
6}
7combo.store.loadData(data);
在第1行，首先定义了一个空数组data。在第2行清理combobox的值状态，避免当前选择值不存在，不过你也可以保留，不执行这句。第3和6行通过一循环，遍历树根节点root的子节点，第4行取得一个子节点，在第5行将子节点的id和text组成一个数组增加到data数组中。在第7行将数据加载到combobox的store中。
是不是很简单？呵呵。希望本文能给大家一下帮助，多谢！
本文的完整代码：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>动态修改combobox选择项例子</title>
<metahttp-equiv="content-type"content="text/html;charset=utf-8">
<linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css">
</head>
<body>
<scripttype="text/javascript"src="../../adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="../../ext-all.js"></script>
<scripttype="text/javascript"src="../../ext-lang-zh_CN.js"></script>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();

varroot=newExt.tree.TreeNode({
text:'选项',
allowDrag:false,
allowDrop:false
});

root.appendChild(
newExt.tree.TreeNode({id:1,text:'选项一',allowDrag:false}),
newExt.tree.TreeNode({id:2,text:'选项二',allowDrag:false}),
newExt.tree.TreeNode({id:3,text:'选项三',allowDrag:false}),
newExt.tree.TreeNode({id:4,text:'选项四',allowDrag:false})
);

vartree=newExt.tree.TreePanel({
style:'margin:20px0020px',
title:'选项列表',
width:200,
height:300,
root:root
})

tree.render(document.body);

root.expand();

varcombo=newExt.form.ComboBox({
valueField:"id",
displayField:"text",
store:newExt.data.SimpleStore({
fields:["id","text"],
data:[]
}),
mode:'local',
blankText:'请选择',
emptyText:'请选择',
hiddenName:'testhide',
fieldLabel:'测试',
name:'test',
anchor:'90%'
})

varsimpleForm=newExt.FormPanel({
labelAlign:'left',
title:'动态修改combobox选择项例子',
buttonAlign:'center',
bodyStyle:'padding:5px',
style:'margin:20px0020px;',
width:600,
frame:true,
labelWidth:80,
items:[combo],
buttons:[{
text:'改变选项',
handler:function(){
vardata=[];
combo.clearValue();
for(vari=0;i<root.childNodes.length;i++){
varnode=root.childNodes[i];
data.push([node.id,node.text]);
}
combo.store.loadData(data);
}
}]
});

simpleForm.render(document.body);
});

</script>
</body>
</html>
单击这里可下载本问例子。
注：这次只单独打包了本例子的html文件，大家注意一下js和css的路径就可以了。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航