日期:2014-05-16  浏览次数:20398 次

Extjs3.2 fieldset 添加 panel 再删除,bug解决
最近公司的一个项目中需要用extjs中的fieldset进行动态的添加、删除元素,结果遇到了这样的bug,当我在fieldset中动态添加一个嵌套panel的textfield属性时,之后我在删除这个panel,这个panel 的dom确实是从 document中删除了,可是在formpanel级别的并没有移除,在formpanel表单验证的时候会报错。
   在extjs的官网中 看了有同样问题的人,大家讨论的结果是 这个是formpanel布局的bug,有人给出了解决的 办法,
连接地址http://www.sencha.com/forum/showthread.php?25479-2.0.1-2.1-Field.destroy()-on-Fields-rendered-by-FormLayout-does-not-clean-up.&p=120171

对于extjs 3.2的解决办法是:
Ext.override(Ext.layout.FormLayout, {
	renderItem : function(c, position, target){
		if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
			var args = this.getTemplateArgs(c);
			if(typeof position == 'number'){
				position = target.dom.childNodes[position] || null;
			}
			if(position){
				c.itemCt = this.fieldTpl.insertBefore(position, args, true);
			}else{
				c.itemCt = this.fieldTpl.append(target, args, true);
			}
			c.actionMode = 'itemCt';
			c.render('x-form-el-'+c.id);
			c.container = c.itemCt;
			c.actionMode = 'container';
		}else {
			Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
		}
	}
});
Ext.override(Ext.form.Field, {
	getItemCt : function(){
		return this.itemCt;
	}
});
Ext.layout.FormLayout.prototype.trackLabels = true;



我本人使用的出问题的js代码是:
Ext.onReady(function(){
 var c = 0;
 var testForm = new Ext.form.FormPanel({   
     name: "form1",   
     frame:true,   
     width: 850,   
     items: [
		 new Ext.form.FieldSet({ 
			  id:'root', 
			  name: 'testFieldSet',   
			  autoHeight: true,   
			  title: 'fieldset',
			  layout:'column', 
              isFormField : true,
			  layoutConfig:{
					columns:2
			  }, 
              collapsible: true, 
			  labelWidth: 60,
			  items: [{   
					  layout: 'form',
                      columnWidth:.5,
				      autoDestroy: true,
					  items: [{
						  xtype : "textfield",   
						  name : "testtextvalid",   
						  fieldLabel: "----",   
						  frame:true,
						  allowBlank: false   					  
					  }] 

			}]   
		}),{
			xtype:'button',
			text:'test',
			handler: function (){
				alert(	Ext.getCmp('tx'+(c)) );
			
			}
		},{
		xtype: 'button',
	    text: 'add',
		handler: function (){
          c += 1;
		 var testFieldSet = Ext.getCmp('root');
		 testFieldSet.add({
					  id:'te'+c,
					  columnWidth:.5,
					  layout: 'form',
				      autoDestroy: true,
					  items: [{
						  id: 'tx'+c,
						  xtype : "textfield",   
						  name : "testtextvalid",   
						  fieldLabel: "extjs"+c,   
						  frame:true,
						  allowBlank: false 
				      }]   
		  });
          testFieldSet.doLayout();
		  testForm.doLayout();    
		  testFieldSet.form = testForm.getForm();  
		
		}
	 },{
		xtype: 'button',
	    text: 'del',
		handler: function (){
		  var fieldset = Ext.getCmp('root'); 
		  Ext.getCmp('tx'+c).destroy(); 
          Ext.getCmp('te'+c).destroy(); 
		  
		  fieldset.doLayout();
		  testForm.doLayout();
		 
		  c -= 1;
		}
	 } ,{
			xtype: 'button',
			text: 'submit',
			handler: function (){
			   if(testForm.getForm().isValid()){
					alert("yes");
			   }else{
				   alert("no");
			   }
			}
		 }
   ]           
  });   
  
  testForm.render(Ext.get('idForm'));       
  
});