ext总对form表单items的结构动态添加/删除

在工作中有这样一个需求:  

显示访问记录情况(包括访问状态,  最后访问时间等信息 ),  初始时items只有8个控件,  当多一条数据就需要动态的添 加一个控件, 因为每次查询都对items结构进行了修改, 为了不影响下次查询的显示结果,  需要回复items的结构到初始 状态 ,这时候就需要删除多余控件,

操作中遇到的问题:  添加成功, 删除控件, 仍然在页面显示删除的控件

解决方案:

每次添加items控件前,  都需要先检测控件是否是初始状态,   如果不是,  就先通过setVisible(false),设置隐藏对应的控件, 然 后再remove(item) 删除控件,   这里提到必须要先隐藏再删除,, 不先隐藏回显时仍然会出现这些应该删除的控件, 

为保证删除成功,  需要在添加控件时, 根据规则算法生成不重复的id值,  countId += 3*index-n的方式,  同时放将id在数组中 放置, 以便删除控件时remove(Ext.getCmp(countArry[i-m]+''),true)找到对应的控件

注意: 核心代码已经标红, 其他的是当时需求的逻辑代码, 不必深究, 网上查不到解决方案,  自己一点点摸索出来的方案,  希 望大家互相分享

var countArry = []; //用于记录id, 

var countId = 0;  //用于设置id值
//添加items的控件操作
function addItem(datas,viewFormId){
var count = 0;//记录索引
for(data in datas)  // json数组的最外层对象  
    {     
        Ext.each(datas[data],function(items)  {  
            Ext.each(items,function(item,index){  
                    
            var id1 = 3 *index +3;
            countId+=id1;
            countArry[count++] = countId;
            countArry[count++] = countId-1;
            countArry[count++] = countId-2;
                    var temp = Ext.getCmp(viewFormId);
                var fd = new Ext.form.TextField({xtype: 'textarea',name:'xx'+1,
                //id:item.createDate,
                fieldLabel:item.staffName,
                labelWidth:70,
                id:(countId)+'',
                height :80,
                width: 500,
                value:item.remark,
                readOnly:true,
                labelAlign: 'right',
                labelWidth: 70,
                margin : '10 0 10 0',
                }
                );
                temp.items.add(temp.items.getCount(),fd);
                temp.doLayout();
                //动态添加最后更新时间
                var tempUpdate = Ext.getCmp(viewFormId);
                var fdUpdate = new Ext.form.TextField({xtype: 'textfield',name:'x'+1,
                //id:item.createDate + index+2,
                fieldLabel:' ',
                labelWidth:70,
                width : 300,
                id:(countId-1) + '',
                labelSeparator:'',
                readOnly:true,
                value:Ext.util.Format.date(item.createDate, "Y-m-d H:i:s"),
                labelAlign: 'right',
                margin : '10 0 10 0',
               
                }
                );
                tempUpdate.items.add(tempUpdate.items.getCount(), fdUpdate);
                tempUpdate.doLayout();
               
                //动态添加最后沟通结果
                var remarkContactStatu = Ext.getCmp(viewFormId);
                var fdContactStatu = new Ext.form.TextField({
                xtype : 'textfield',
                //id :  item.createDate + index + 1,
                fieldLabel : '沟通就结果:',
                name : 'fujinxueCust.contactStatu' + 1,
                labelWidth:120,
                width : 200,
                value:item.configName,
                id:(countId-2)+'',
                labelAlign: 'right',
                readOnly:true,
                margin : '10 0 10 0',
                }
                );
                remarkContactStatu.items.add(remarkContactStatu.items.getCount(),fdContactStatu );
                remarkContactStatu.doLayout();
               
            });  
        });  
    }
    
}


//查询所有的咨询记录
function queryRemarkByParentId(id,flag){//flag用于是识别是从编辑还是查看进来的
Ext.Ajax.request({
url : 'cust/tbFujinxueCustRemark_queryRemarkByParentId.action',
asynchronous : false,
params: {
parentId:id,
    },
success : function(response,options) {
var datas = Ext.decode(response.responseText); 

var m ;//用于从还原编辑和查看items的控件
var viewFormId;
if('edit' ===flag) {
m = 8;
viewFormId='FujinxueCustBelowformid';
}if('detail'===flag) {
m = 4;
viewFormId='FujinxueCustBelowformi';
}

//对items的结构还原到初始状态
var itemLength = Ext.getCmp(viewFormId).items;
          if(itemLength.length >m) {//对表单多余项移出
            var count  = itemLength.length;
            for(var i=m;i<count;i++){
            Ext.getCmp(countArry[i-m]+'').setVisible(false); 
            Ext.getCmp(viewFormId).items.remove(Ext.getCmp(countArry[i-m]+''),true);
           
                }
                Ext.getCmp(viewFormId).doLayout(true);
              }
            
          Ext.Array.clean(countArry);
                 //添加items的控件
  addItem(datas,viewFormId);
            
 if('edit' ===flag) {
Ext.getCmp('FujinxueCustBelowEditViewid').show();//显示编辑口
 }if('detail'===flag) {
Ext.getCmp('FujinxueCustBelowViewid').show();//显示查看口
        }
 }
});
}


function edit(id,custName,custMobile,type,staffNames,staffNo){


//Ext.getCmp('FujinxueCustBelowEditViewid').doLayout();
Ext.getCmp('idd').setValue(id);//parent_id
Ext.getCmp('custNames').setValue(custName);

Ext.getCmp('custMobiles').setValue(custMobile);

//设置当前用户
Ext.getCmp('remark2').setFieldLabel(staffName);
Ext.getCmp('staffName').setValue(staffName);//设置姓名
Ext.getCmp('staffNo').setValue(staffNo);//设置姓名

Ext.getCmp('remark2').setValue('');

if(type==='1'){
type= '课程咨询';
}
if(type==='2'){
type = '租赁咨询';
}if(type==='') {
type=  '-';
}
Ext.getCmp('types').setValue(type);
queryRemarkByParentId(id,'edit');

};