在很多时候，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>
<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的路径就可以了。
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1814139
 [Ext 详解]标准布局类:8.ColumnLayout列布局 (myext整理，06-27)8 ColumnLayout列布局 Ext.layout.ColumnLayout对应面板布局layout配置项的名称为column。这是一种多列风格的布局样式，每一列的宽度都可以根据百分比或固定值来进行设置，高度允许根据内容进行变化，它支持一个特殊的……
[Ext 详解][转载]EXT核心API详解Ext.widgets(十四)-Button,Split (佚名，07-20)Ext.Actionaction实现一个脱离了容 器的事件,所有它可以在多个容器之间共享,不过好象只有Ext.Toolbar, Ext.Button 和 Ext.menu.Menu支持action接口:),因为容器要实现下面所有的方法setText(string), setIconCls(strin……
[Ext 详解]Ext源码分析：Ext.onReady到底做了什么？ (http://w…，11-30)注意：这篇文章我是针对FF来写的，看完这篇文章，你能把IE的也写出来，就说明你入门了：）代码下面有下载， 无 需引入任何js首先，我们来看下面的代码片段Crab = {}; Crab.util = {};//把Namespace模拟出来 Crab.EventManager = function(){……
[Ext 详解][图文]读Ext源码之八（原生事件对象的修复及扩充） (myext，12-15)Ext库也对浏览器原生的事件对象做了包装，以保证兼容所有浏览器。这里 列举了浏览器原生事件对象各浏览器中兼容性。这里 列出了各种情况下事件对象的获取。在Ext事件管理类 Ext.EventManager 中会悄悄的将浏览器原始事件对象进行转换Js代码 e = Ext.EventO……
[Ext 详解]Ext源码分析之模板模式解说——Ext组件渲染render的全 (http://w…，11-30)模板模式是设计模式中很重要的一个知识点，我在模式总结——模板方法这篇文章中已有总结，在面向对象设计中有着举足轻重的地位。在Ext中更是发挥的淋漓尽致，为什么这么说呢？Ext中的组件有着很深的继承关系，很多方法都有着重复，而且不仅是代码上的重复，更多的是流程上的重复 比方说，Ext.Panel吧，将一……
|
