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

在很多时候，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 "-//W 3C //DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>动态修改combobox选择项例子</title>

</head>

<body>

Ext.onReady(function(){

Ext.QuickTips.init();