Ext2.0本地模式动态修改combobox选择项
2007-10-07 17:32
435 查看
在很多时候,combobox的选择项已经下载到本地,只是存储方式不同,我们就需要动态修改combobox的选择项。例如有一颗树,树的节点就是combobox的选项,在Ext2.0中树的存储格式不是使用store的,而combobox必须使用store,这就需要进行数据转换。本文就以此作为例子,研究一下如何动态修改combobox的选择项。
我们先创建一个带几个选项的树:
代码里先创建了一个树节点root,这个将作为树的根节点,然后加入了id分别为1、2、3、4的子节点,这4个子节点就是combobox选择项,id是combobox的提交值,text是显示值。
下面创建一个combobox,:
combobox使用了SimpleStore作为它的sotre,SimpleStore定义了id和text两个字段,id作为combobox的值字段(valueField:"id"),text作为combobox的显示字段(displayField:"text")。Combobox的操作模式是本地模式(mode:'local')。
我们先来测试一下页面。页面加载完后,combobox是没有选择项的,我们单击“改变选项”按钮,就有选择项了。
我们来分析一下按钮的单击事件:
在第1行,首先定义了一个空数组data。在第2行清理combobox的值状态,避免当前选择值不存在,不过你也可以保留,不执行这句。第3和6行通过一循环,遍历树根节点root的子节点,第4行取得一个子节点,在第5行将子节点的id和text组成一个数组增加到data数组中。在第7行将数据加载到combobox的store中。
是不是很简单?呵呵。希望本文能给大家一下帮助,多谢!
本文的完整代码:
单击这里可下载本问例子。
注:这次只单独打包了本例子的html文件,大家注意一下js和css的路径就可以了。
我们先创建一个带几个选项的树:
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(); |
下面创建一个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%' }) |
下面创建一个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); |
我们来分析一下按钮的单击事件:
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); |
是不是很简单?呵呵。希望本文能给大家一下帮助,多谢!
本文的完整代码:
<!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的路径就可以了。
相关文章推荐
- Ext2.0本地模式动态修改combobox选择项
- Ext2.0本地模式动态修改combobox选择项
- Ext2.0本地模式动态修改combobox选择项
- Ext2.0本地模式动态修改combobox选择项
- Ext2.0本地模式动态修改combobox选择项
- Ext.form.ComboBox 本地和远程模式的基本定义
- 用Ext 2.0 combobox 做的省份和城市联动选择框
- Ext.form.ComboBox 本地和远程模式的基本定义
- 用Ext 2.0 combobox 做的省份和城市联动选择框
- 用Ext 2.0 combobox 做的省份和城市联动选择框
- Ext.form.ComboBox 本地和远程模式的基本定义
- EXT NumberField\TextField\ComboBox的fieldLabel动态修改
- 用Ext 2.0 combobox 做的省份和城市联动选择框
- 用Ext 2.0 combobox 做的省份和城市联动选择框
- 用Ext 2.0 combobox 做的省份和城市联动选择框
- OAuth 2.0 构建微服务身份认证(一):授权模式选择
- js前端动态打开本地文件夹选择本地文件
- (16)ExtJS之comboBox本地数据源、Ext.form.Label标签、Ext.form.FieldSet字段集
- Silverlight 2.0 通过OpenFileDialog动态加载本地图像文件
- [导入]c#2.0中动态修改页面标题