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 "-//W3C//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的路径就可以了

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3