`
kaobian
  • 浏览: 208310 次
  • 性别: Icon_minigender_1
  • 来自: 哈尔滨
社区版块
存档分类
最新评论

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'));       
  
});



1
1
分享到:
评论

相关推荐

    ExtJS3.2正式版

    ExtJS3.2正式版 货真价实 ExtJS3.2正式版

    ExtJs3.2+中文API

    ExtJs3.2+中文API 便于开发查找API 很方便

    extjs3.2资源压缩包

    extjs3.2 js+jsp实现功能,美化页面展现效果,方便快捷,

    ExtJs3.2官方原版

    这是官方原生态的ExtJs3.2版本,由于官方都是英文,可能有很多人不会下载,在这边就直接给出了。

    ExtJS 3.2 聊天室程序(类Q_Q群)

    ExtJS 3.2 聊天室程序(类Q_Q群)

    ExtJs 3.2 中文API帮助文档

    ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。功能丰富,无人能出其右。无论是界面之美,还是功能之强,ext的表格控件都... ExtJs 3.2 中文API帮助文档,CHM离线的,希望对大家有帮助

    ExtJS3.2的各种例子

    我收集了各种ExtJS的例子,有3.2还有2.5,还有所有“掏钱学ExtJS”的例子,绝对物超所值。

    extjs3.2 中文API 完整版

    网络上流传很多exjs 中文API,都神马东西,下载都没用。现在鄙人从脚本娃娃群分享的完整API上传分享给大家!

    ExtJS3.2列布局

    Ext3.2的列布局,排列方式,适用于form表单中一行几列的排序方式

    ExtJS3.2中文API与示例

    Ext3.2中文API及代码示例,经典的API翻译,丰富的代码示例 就在这里等着你下!

    Extjs3.2中文帮助手册

    Extjs 中文版 离线帮助手册,开发Extjs必备参考手册~~~

    extjs3.2api中文

    Ext3.2中文API, BLANK_IMAGE_URL : 图片路径:一张1×1的透明图片,Ext使用它来和CSS一起创建内嵌的图标。

    ExtJS3.2资源包

    ExtJs3.2的资源包,需要的朋友可以下载

    EXTJS3.2-3.3中文API和包

    EXTJS3.3中文API和包EXTJS3.3中文API和包EXTJS3.3中文API和包EXTJS3.3中文API和包

    extjs-3.4和3.2版本和spket插件

    1.提供了extjs-3.2及extjs-3.4的离线包 2.提供了spket的eclipse插件包,plugins和features放入eclipse对应的目录中,启动eclipse即可 3.离线包中包含了ext.jsb2文件,可在eclipse的spket中进行相应的配置,方便开发...

    Learning ExtJS 3.2.pdf

    Learning ExtJS 3.2.pdf绝对的高清,不过是英文的,下载之前考虑好,不想骗你们的分,呵呵

    extjs3.2中文API文档

    这是一个extjs3.2的中文API文档,可以用于学习。

    ExtJS 3.2 聊天室程序(类QQ群)

    技术:ExtJS 3.2 DWR 3.0 Struts 2.16 Spring 2.0 Hibernate 3.2 MySql 5.0 原文地址: http://yourgame.javaeye.com/blog/681537 火狐浏览器,谷歌浏览器测试通过. 讨论Q_群:91986229(群3) 76202406(群2) 62150370...

    安装Extjs的插件spket,extjs3.2版.doc

    转-eclipse下安装Extjs的插件spket,extjs3.2版 转自:http://xiehx163.blog.163.com/blog/static/6146679620097281113653/ 最近项目要用ext进行开发,所以这段时间开始学习ext. 我这里用的是ext3.2,eclipse3.5。 每...

    ExtJS 3.2的中文参考手册

    学习ExtJS 3.2的最好入门教程,pdf文件格式,无论是新手,还是想学习Ext的人,本文档都适合于你。

Global site tag (gtag.js) - Google Analytics