0
点赞
收藏
分享

微信扫一扫

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

狐沐说 2023-04-04 阅读 69
extstylesheetfunctionhtmltreePython后端开发


 

   在很多时候，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的路径就可以了。

举报

相关推荐

Ext2.0 form使用实例

extlayoutborderdivfunctionPython后端开发

Ext2.0布局类初探

extlayoutapiborderhtmlMySQL数据库

获取CheckBoxList当前选择项

aLinux系统/运维

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

extfunctionurlci字段Html/CSS前端开发

1.Flink 1.12.1本地模式安装

Flink

动态修改hystrix配置项

加载properties文件官网编程语言

HTML5本地存储——IndexedDB

数据库数据结构与算法javascriptViewUI句柄JavaScript前端开发

win10本地启动tomcat

java后端

HTML5本地存储方式

html5前端html

vue+element plus 使用table组件，清空用户的选择项

elementui前端javascript
0 条评论