ext 中combobox动态添加后动态移除

Question

var conpanels = new Ext.Panel({
id :'conpanels',
autoHeight : true,
border : false
});
var storeCon1= new Ext.data.SimpleStore({
fields : ['key','value'],
data : [['请选择...','no'],['条件11',11],['条件12',12],['条件13',13]]
});

   var condition11 = new Ext.form.ComboBox({
        fieldLabel : '显示数据的筛选条件 ',
        mode : 'local',
        typeAhead : true,
        //labelWidth : 300,
        labelStyle : 'width:130;text-align:right',
        store : storeCon1,
        allowBlank : false,
        emptyText : '  ',
        autoCreate : true,
        editable:false,// 禁止编辑
        valueField : "value",
        displayField : "key",
        hiddenName :'condion1',
        triggerAction : 'all',
        name : 'condion1',
        listeners:{
             select: function(combo, record, index) {

                var store = combo.store;    
                var storeCon2=  new Ext.data.SimpleStore({
                        fields : ['key','value'],
                        data : []
                });
               if(store.getTotalCount()>0){
                   for(var k=0;k< store.getTotalCount();k++){
                     storeCon2.add(store.getAt(k));
                   }
               }
               storeCon2.remove(record);

               var count=0;
                // alert(combo.getValue());
                 if('no'==combo.getValue()){
                    var tt= Ext.getCmp('conpanels').items;
                    tt.each(
                        function(item, index, len) { 
                           alert(len);
                           item.destroy();
                        }
                    )
                 }else{
                     Ext.getCmp('conpanels').show();
                     if(this.store.getAt(0) ){
                          addConPanel(storeCon2,count);
                     }
                 }    
            }
       }
   });

function addConPanel(store,count){
var condition = new Ext.form.ComboBox({
fieldLabel : '且 ',
mode : 'local',
typeAhead : true,
labelStyle : 'width:130;text-align:right',
store : store,
allowBlank : false,
emptyText : ' ',
autoCreate : true,
editable:false,// 禁止编辑
valueField : "value",
displayField : "key",
hiddenName :'condition0'+count,
// id : 'condition0'+count,
triggerAction : 'all',
name : 'condition0'+count,
listeners:{
select: function(combo, record, index) {

                        var store = combo.store;    
                         var storeCon2=  new Ext.data.SimpleStore({
                                 fields : ['key','value'],
                                 data : []
                         });
                        if(store.getCount()>0){
                            for(var k=0;k< store.getCount();k++){
                              storeCon2.add(store.getAt(k));
                            }
                        }
                        storeCon2.remove(record); 
                        alert(Ext.get('conpanels').getUpdater());
                       if('no'==combo.getValue()){



                           // alert(Ext.getCmp('conpanels').items.length)
                           // alert( Ext.getCmp('conpanels').items)
                            var tt= Ext.getCmp('conpanels').items;
                            tt.each(
                               function(item, index, len) { 
                                     var ss ;
                                     for( var j in item){
                                         ss +=j +'-->' ;//+item[j]+'\n';
                                     }
                                     alert(this.getId());
                                     alert(index+ '--' +len)
                                }
                            )


                            //Ext.getCmp('condPanel00').remove();
                            // Ext.getCmp('conpanels').hide();
                         }else{
                             Ext.getCmp('conpanels').show();
                             // alert(this.store.getAt(0).get('value'))
                             if(this.store.getAt(0)){
                                 addConPanel(storeCon2,count);
                             }
                         }
                     }
                }
           });

代码如上，当第一个选中条件11时，第二个中就没有条件11这个选项，第二个下拉列表的选项就应该为条件12，条件13这三个选项，当第二个选中条件12时，还应该继续增加第三个下拉列表，第三个下拉列表的选项应该为条件13，直到所有的选项被选完才停止增加下拉列表
当改变以前选的值 ，则下面的相应要改变。
以上代码不能实现修改的效果。

Answer 1

你的代码我就不看了,把我的思路说出来,看对你有帮助不

首先我理解一下,不知道对不对

你有若干个值,比如3个,以开始只有一个combo,第一个combo的value有 1,2,3当第一个选择value比如1后,动态创建第二个combo,第二个combo的value默认只有2,3,当第二个combo选择value2的时候,自动创建combo3,此时的的combo3只有3的value可以选择了

因为这些combo都是放在formPanel中的,所以可以通过formPanel来操作他们添加和删除,但是添加和删除完毕后必须执行formPanel.doLayout();这样才会在界面中呈现修改后的结果.

至于每个combo的value的设定是针对combo的store对象的操作了.默认第一个有1,2,3的value,监听第一个的select事件,在事件中创建第二个combo,把第一个combo的store克隆一个过来,然后去掉其中包含了第一个combo的value....依此类推. 记住要doLayout()