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

网络整理 - 07-27

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

　　我们先创建一个带几个选项的树：

　　代码里先创建了一个树节点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" "">
　　<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>