在工作中有这样一个需求:
显示访问记录情况(包括访问状态, 最后访问时间等信息 ), 初始时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');
};