ext panel 移除item失效的解决办法

 

ext panel 移除item失效的解决办法

在form中使用remove 移除item的时候，会留下他的html标签label，为了解决这个问题在网上搜了一下。

方法为：

//解决form中remove 一个field 时，fieldLabel不能被删除的问题   
Ext.override(Ext.layout.FormLayout, {
    renderItem : function(c, position, target){
        if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
            var args = [
                   c.id, c.fieldLabel,
                   c.labelStyle||this.labelStyle||'',
                   this.elementStyle||'',
                   typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
                   (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
                   c.clearCls || 'x-form-clear-left'
            ];
            if(typeof position == 'number'){
                position = target.dom.childNodes[position] || null;
            }
            if(position){
                c.formItem = this.fieldTpl.insertBefore(position, args, true);
            }else{
                c.formItem = this.fieldTpl.append(target, args, true);
            }
            c.render('x-form-el-'+c.id);
            c.container = c.formItem; // must set after render, because render sets it.
            c.actionMode = 'container';
        }else {
            Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
        }
    }
});

 

还有就是动态添加field：

             在formpanel已经被渲染后，使用form.add添加不能渲染，即使使用了doLayout().这是formLayout的中存在

Bug。

使用Ext.getCmp().add和 doLayout成功，但是form 又找不到该field。通过firebug 发现在 form的items中没有添加

该field，因此使用form.items.add(field)添加后，成功。因此在删除时，要从form.items.remove删除。

相关代码：

form中有一个fieldset ,其中有几个隐藏的panel ，先站位。将创建好的field添加到这些panel中，并将其显示。

{
   xtype : 'fieldset',
   id:'propertyForm',
   layout : 'column',
   labelWidth : 60,
   autoHeight : true,
   title : '商品属性',   
   items : [  {
    columnWidth : .5,
    layout : 'form',
    hidden:true,
    id:'container1'
   }, {
    columnWidth : .5,
    layout : 'form', 
    hidden:true,
    id:'container2'    
   }, {
    columnWidth : .5,
    layout : 'form', 
    hidden:true,
    id:'container3'
   }, {
    columnWidth : .5,
    layout : 'form', 
    hidden:true,
    id:'container4'
   }

]}

删除：

clearPropertyForm:function(){  
  var p ="container"
  for(i=1;i<=10;i++){
   var pp =p+i;
   if(Ext.getCmp(pp).items.length>0){ 
    this.form.remove("item"+i);
    Ext.getCmp(pp).remove("item"+i);    
   }  
   Ext.getCmp(pp).hide();
    
  }
  this.doLayout();  
  Ext.getCmp('propertyForm').hide();
 },

添加：

var field =new Ext.form.TextField({
     id : "item" + i,
     fieldLabel : label,
     name : name,
     value:label1[1],     
     anchor : '100%'     
    });  
    this.form.add(field);
   Ext.getCmp(c+i).show();
   Ext.getCmp(c+i).add(field); 

  this.doLayout();  

Ext.getCmp('propertyForm').show();