在很多时候，combobox的选择项已经下载到本地，只是存储方式不同，我们就需要动态修改combobox的选择项。例如有一颗树，树的节点就是combobox的选项，在Ext2.0中树的存储格式不是使用store的，而combobox必须使用store，这就需要进行数据转换。本文就以此作为例子，研究一下如何动态修改combobox的选择项。

我们先创建一个带几个选项的树：

 

  1. var root = new Ext.tree.TreeNode({  
  2.  
  3.     text: '选项',   
  4.  
  5.     allowDrag:false,  
  6.  
  7.     allowDrop:false  
  8.  
  9. });  
  10.  
  11.    
  12.  
  13. root.appendChild(  
  14.  
  15.     new Ext.tree.TreeNode({id:1,text:'选项一',allowDrag:false}),  
  16.  
  17.     new Ext.tree.TreeNode({id:2,text:'选项二',allowDrag:false}),  
  18.  
  19.     new Ext.tree.TreeNode({id:3,text:'选项三',allowDrag:false}),  
  20.  
  21.     new Ext.tree.TreeNode({id:4,text:'选项四',allowDrag:false})  
  22.  
  23. );  
  24.  
  25.    
  26.  
  27. var tree=new Ext.tree.TreePanel({  
  28.  
  29.        style:'margin:20px 0 0 20px',  
  30.  
  31.        title:'选项列表',  
  32.  
  33.   width: 200,  
  34.  
  35.   height:300,  
  36.  
  37.   root:root  
  38.  
  39. })  
  40.  
  41.    
  42.  
  43. tree.render(document.body);  
  44.  
  45.    
  46.  
  47. root.expand();  

代码里先创建了一个树节点root，这个将作为树的根节点，然后加入了id分别为1、2、3、4的子节点，这4个子节点就是combobox选择项，id是combobox的提交值，text是显示值。

下面创建一个combobox，：

 

  1. var combo=new Ext.form.ComboBox({  
  2.  
  3.          valueField :"id",  
  4.  
  5.          displayField: "text",  
  6.  
  7.          store:new Ext.data.SimpleStore({  
  8.  
  9.              fields: ["id", "text"],  
  10.  
  11.              data: []  
  12.  
  13.               }),  
  14.  
  15.          mode: 'local',  
  16.  
  17.          blankText:'请选择',  
  18.  
  19.          emptyText:'请选择',  
  20.  
  21.          hiddenName:'testhide',  
  22.  
  23.          fieldLabel: '测试',  
  24.  
  25.          name: 'test',  
  26.  
  27.          anchor:'90%'  
  28.  
  29. })  
combobox使用了SimpleStore作为它的sotre，SimpleStore定义了id和text两个字段，id作为combobox的值字段（valueField :"id"），text作为combobox的显示字段（displayField: "text"）。Combobox的操作模式是本地模式（mode: 'local'）。
  1. var simpleForm = new Ext.FormPanel({  
  2.  
  3.        labelAlign: 'left',  
  4.  
  5.        title: '动态修改combobox选择项例子',  
  6.  
  7.        buttonAlign:'center',  
  8.  
  9.        bodyStyle:'padding:5px',  
  10.  
  11.        style:'margin:20px 0 0 20px;',  
  12.  
  13.        width: 600,      
  14.  
  15.        frame:true,  
  16.  
  17.        labelWidth:80,  
  18.  
  19.        items: [combo],  
  20.  
  21.        buttons:[{  
  22.  
  23.               text:'改变选项',  
  24.  
  25.               handler:function(){  
  26.  
  27.                     var data=[];  
  28.  
  29.                      combo.clearValue();  
  30.  
  31.                     for(var i=0;i<root.childNodes.length;i++){  
  32.  
  33.                            var node=root.childNodes[i];  
  34.  
  35.                            data.push([node.id,node.text]);  
  36.  
  37.                     }  
  38.  
  39.                     combo.store.loadData(data);  
  40.  
  41.               }  
  42.  
  43.   }]  
  44.  
  45. });  
  46.  
  47.    
  48.  
  49. 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中。
是不是很简单？呵呵。希望本文能给大家一下帮助，多谢！
本文的完整代码：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2.  
  3. <html> 
  4.  
  5. <head> 
  6.  
  7.   <title>动态修改combobox选择项例子</title> 
  8.  
  9.        <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
  10.  
  11.   <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"> 
  12.  
  13. </head> 
  14.  
  15. <body> 
  16.  
  17.   <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 
  18.  
  19.   <script type="text/javascript" src="../../ext-all.js"></script> 
  20.  
  21.   <script type="text/javascript" src="../../ext-lang-zh_CN.js"></script> 
  22.  
  23.   <script> 
  24.  
  25. Ext.onReady(function(){  
  26.  
  27. Ext.QuickTips.init();  
  28.  
  29.    
  30.  
  31. var root = new Ext.tree.TreeNode({  
  32.  
  33.     text: '选项',   
  34.  
  35.     allowDrag:false,  
  36.  
  37.     allowDrop:false  
  38.  
  39. });  
  40.  
  41.    
  42.  
  43. root.appendChild(  
  44.  
  45.     new Ext.tree.TreeNode({id:1,text:'选项一',allowDrag:false}),  
  46.  
  47.     new Ext.tree.TreeNode({id:2,text:'选项二',allowDrag:false}),  
  48.  
  49.     new Ext.tree.TreeNode({id:3,text:'选项三',allowDrag:false}),  
  50.  
  51.     new Ext.tree.TreeNode({id:4,text:'选项四',allowDrag:false})  
  52.  
  53. );  
  54.  
  55.    
  56.  
  57. var tree=new Ext.tree.TreePanel({  
  58.  
  59.        style:'margin:20px 0 0 20px',  
  60.  
  61.        title:'选项列表',  
  62.  
  63.   width: 200,  
  64.  
  65.   height:300,  
  66.  
  67.   root:root  
  68.  
  69. })  
  70.  
  71.    
  72.  
  73. tree.render(document.body);  
  74.  
  75.    
  76.  
  77. root.expand();  
  78.  
  79.    
  80.  
  81. var combo=new Ext.form.ComboBox({  
  82.  
  83.          valueField :"id",  
  84.  
  85.          displayField: "text",  
  86.  
  87.          store:new Ext.data.SimpleStore({  
  88.  
  89.              fields: ["id", "text"],  
  90.  
  91.              data: []  
  92.  
  93.               }),  
  94.  
  95.          mode: 'local',  
  96.  
  97.          blankText:'请选择',  
  98.  
  99.          emptyText:'请选择',  
  100.  
  101.          hiddenName:'testhide',  
  102.  
  103.          fieldLabel: '测试',  
  104.  
  105.          name: 'test',  
  106.  
  107.          anchor:'90%'  
  108.  
  109. })  
  110.  
  111.    
  112.  
  113. var simpleForm = new Ext.FormPanel({  
  114.  
  115.        labelAlign: 'left',  
  116.  
  117.        title: '动态修改combobox选择项例子',  
  118.  
  119.        buttonAlign:'center',  
  120.  
  121.        bodyStyle:'padding:5px',  
  122.  
  123.        style:'margin:20px 0 0 20px;',  
  124.  
  125.        width: 600,      
  126.  
  127.        frame:true,  
  128.  
  129.        labelWidth:80,  
  130.  
  131.        items: [combo],  
  132.  
  133.        buttons:[{  
  134.  
  135.               text:'改变选项',  
  136.  
  137.               handler:function(){  
  138.  
  139.                     var data=[];  
  140.  
  141.                      combo.clearValue();  
  142.  
  143.                     for(var i=0;i<root.childNodes.length;i++){  
  144.  
  145.                            var node=root.childNodes[i];  
  146.  
  147.                            data.push([node.id,node.text]);  
  148.  
  149.                     }  
  150.  
  151.                     combo.store.loadData(data);  
  152.  
  153.               }  
  154.  
  155.   }]  
  156.  
  157. });  
  158.  
  159.    
  160.  
  161. simpleForm.render(document.body);  
  162.  
  163. });  
  164.  
  165.    
  166.  
  167.   </script> 
  168.  
  169. </body> 
  170.  
  171. </html> 
单击这里可下载本问例子。
注：这次只单独打包了本例子的html文件，大家注意一下js和css的路径就可以了。