`
kaobian
  • 浏览: 211643 次
  • 性别: 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资源压缩包

    ExtJS 3.2 是一个历史悠久的JavaScript框架,主要用于构建富客户端Web应用程序。这个资源压缩包包含了一系列用于创建交互式、动态用户界面的组件和工具。让我们深入了解一下ExtJS 3.2的主要特点和功能。 1. **组件...

    ExtJs3.2官方原版

    12. **社区支持**:虽然不是最新版本,但ExtJs3.2依然有活跃的开发者社区,可以找到很多示例代码和解决方案。 总的来说,“ExtJs3.2官方原版”为开发人员提供了一个强大而全面的框架,用于构建具有专业级特性的Web...

    ExtJs3.2+中文API

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

    ExtJS3.2列布局

    在使用ExtJS3.2的列布局时,你需要创建一个容器(如Panel),然后设置其`layout`属性为`column`。接下来,你可以通过添加子组件(items)来定义每列的内容。每个子组件都可以有自己的宽度,通过`width`属性来指定。...

    extjs3.2api中文

    "extjs3.2api中文"标题表明这是一个中文版的ExtJS 3.2 API文档,对于中文开发者来说,能够更方便地理解和使用这个框架。 "BLANK_IMAGE_URL"是ExtJS中的一个常量,它通常被用作一个占位符图像的URL。这个1×1像素的...

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

    ExtJS 3.2通常包含一个名为`ext.jsb`的文件,这个文件是Spket识别ExtJS库的关键。接下来,按照以下步骤安装Spket插件: 1. **以Eclipse插件形式安装**: - 打开Eclipse,通过菜单栏依次选择`Help` -> `Software ...

    Extjs3.2中文帮助手册

    这个"Extjs3.2中文帮助手册"是开发人员在使用ExtJS 3.2时的重要参考资料,它包含了详细的API文档、示例代码和使用指南,使得开发者能够更方便地理解和应用这个框架。 手册中的知识点主要包括以下几个方面: 1. **...

    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-3.3中文API和包

    EXTJS 3.2-3.3版本是EXTJS框架的一个重要阶段,它提供了大量的组件、布局、数据绑定和事件处理机制,为开发者带来了强大的功能和灵活性。 EXTJS 3.2-3.3中文API文档是学习和开发EXTJS应用的重要参考资料。CHM...

    ExtJS3.2中文API与示例

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

    ExtJS3.2资源包

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

    Eclipse安装Extjs3.2的spket插件(附插件和Ext文件)

    在本文中,我们将详细介绍如何在Eclipse环境中安装适用于ExtJS 3.2的Spket插件,以便于JavaScript开发和代码提示。首先,让我们了解一下Eclipse、ExtJS和Spket这三个关键概念。 Eclipse是一款开源的集成开发环境...

    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 3.2三大框架小类字

    ExtJS 3.2是Sencha公司开发的一款用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件和强大的数据绑定机制。SSH(Spring、Struts、Hibernate)则是一种常见的Java Web开发框架组合,用于处理后端业务逻辑和...

Global site tag (gtag.js) - Google Analytics