Extjs3.2 fieldset 패널 추가 삭제, 버그 해결

4469 단어 ExtJs
최근 회사의 한 프로젝트에서 extjs의fieldset로 동적 추가, 요소 삭제를 해야 하는데 이런 버그가 발생했습니다. 제가fieldset에 패널을 끼워 넣는textfield 속성을 동적 추가했을 때 이 패널을 삭제했습니다. 이 패널의dom는document에서 삭제되었지만formpanel 단계에서 제거되지 않았습니다.formpanel 폼 검증을 할 때 오류가 발생했습니다.
extjs 홈페이지에서 같은 문제가 있는 사람을 봤는데 다들 토론한 결과 이게formpanel 레이아웃의 버그입니다. 누군가가 해결 방법을 제시했습니다.
접속 주소
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'));       
  
});




좋은 웹페이지 즐겨찾기