关闭

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

标签: extstylesheetfunctionhtmltree测试
6187人阅读 评论(3) 收藏 举报
分类:

 

   在很多时候,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分别为1234的子节点,这4个子节点就是combobox选择项,idcombobox的提交值,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作为它的sotreSimpleStore定义了idtext两个字段,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的值状态,避免当前选择值不存在,不过你也可以保留,不执行这句。第36行通过一循环,遍历树根节点root的子节点,第4行取得一个子节点,在第5行将子节点的idtext组成一个数组增加到data数组中。在第7行将数据加载到comboboxstore中。

是不是很简单?呵呵。希望本文能给大家一下帮助,多谢!

本文的完整代码:

 

<!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文件,大家注意一下jscss的路径就可以了。

 
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Ext ComboBox 默认选中某一项

项目中经常用到选择框,需要从后台异步加载数据,可单独写一个组件进行加载 App.ComboBox = function(combo){ var comboBox = new Ext.form.Co...
  • liuguxing
  • liuguxing
  • 2013-02-28 18:11
  • 14564

extjs4 ComboBox 动态加载,联动,设置默认值,锁定等

最近在搞EXTJS,当然就会碰到ComboBox 默认值的问题,结果在网上找了一堆,没有一个w
  • luodaoren1984
  • luodaoren1984
  • 2014-09-19 10:27
  • 1762

ExtJs combobox默认值问题

第一种方式(这种方式,我在使用时,如果数据不是从后台传过来的就可以,如果是从后台传过来的就不行了,要使用第二种方式)、 var CountryCode = [ ['93','Afghanist...
  • zhx624
  • zhx624
  • 2013-02-04 17:12
  • 10403

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

  • 2007-10-07 17:24
  • 1KB
  • 下载

带选择项CheckBox的下拉列表ComboBox控件

  • 2011-10-16 16:18
  • 5KB
  • 下载

ComboBox和ListBox添加项及设置默认选择项

此文章针对 C#(WinForm) Web控件DropDownList和WinForm控件ComboBox机制不一样。 ComboBox没有对应的ListItem需要自己写一个: u...
  • hi_dzj
  • hi_dzj
  • 2012-01-02 16:58
  • 3666

解决QML开发中ComboBox中一个已选择项没有清除的问题

最近使用QML开发一个项目,需要使用ComboBox进行显示,当进行一个操作时,需要向ComboBox添加一个元素,当进行另外一个操作时,需要清除ComboBox里面的元素。但是在操作的过程中,出现了...
  • jiangcaiyang123
  • jiangcaiyang123
  • 2014-09-18 14:17
  • 2579

C#(WinForm)ComboBox和ListBox添加项及设置默认选择项

Web控件DropDownList和WinForm控件ComboBox机制不一样。 ComboBox没有对应的ListItem需要自己写一个: using System; using System...
  • chanyinhelv
  • chanyinhelv
  • 2013-03-12 15:17
  • 1263

用Ext 2.0 combobox 做的省份和城市联动选择框的例程

  • 2007-10-23 12:57
  • 12KB
  • 下载

Ext Combobox 动态下拉树实现

在最近的一个项目中,想利用Ext combobox实现一个动态的下拉树,无奈官方中也没有例子,网上很多例子也是坑爹的,, 决定自已修改 然后实现一个动态的下拉树,废话少说 ,看代码: Ext...
  • csxiaoqiong004
  • csxiaoqiong004
  • 2012-10-10 08:36
  • 595
    个人资料
    • 访问:1569589次
    • 积分:17805
    • 等级:
    • 排名:第620名
    • 原创:164篇
    • 转载:28篇
    • 译文:101篇
    • 评论:2192条
    交流QQ群
    391747779
    193238033
    博客专栏
    《Ext JS 6.2实战》
    《Ext JS权威指南》
    《Sencha Touch实战》
    《Ext JS 4.2 实战》
    文章分类
    最新评论