最近公司的一个项目中需要用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'));
});
分享到:
相关推荐
ExtJS3.2正式版 货真价实 ExtJS3.2正式版
ExtJS 3.2 是一个历史悠久的JavaScript框架,主要用于构建富客户端Web应用程序。这个资源压缩包包含了一系列用于创建交互式、动态用户界面的组件和工具。让我们深入了解一下ExtJS 3.2的主要特点和功能。 1. **组件...
12. **社区支持**:虽然不是最新版本,但ExtJs3.2依然有活跃的开发者社区,可以找到很多示例代码和解决方案。 总的来说,“ExtJs3.2官方原版”为开发人员提供了一个强大而全面的框架,用于构建具有专业级特性的Web...
ExtJs3.2+中文API 便于开发查找API 很方便
在使用ExtJS3.2的列布局时,你需要创建一个容器(如Panel),然后设置其`layout`属性为`column`。接下来,你可以通过添加子组件(items)来定义每列的内容。每个子组件都可以有自己的宽度,通过`width`属性来指定。...
"extjs3.2api中文"标题表明这是一个中文版的ExtJS 3.2 API文档,对于中文开发者来说,能够更方便地理解和使用这个框架。 "BLANK_IMAGE_URL"是ExtJS中的一个常量,它通常被用作一个占位符图像的URL。这个1×1像素的...
ExtJS 3.2通常包含一个名为`ext.jsb`的文件,这个文件是Spket识别ExtJS库的关键。接下来,按照以下步骤安装Spket插件: 1. **以Eclipse插件形式安装**: - 打开Eclipse,通过菜单栏依次选择`Help` -> `Software ...
这个"Extjs3.2中文帮助手册"是开发人员在使用ExtJS 3.2时的重要参考资料,它包含了详细的API文档、示例代码和使用指南,使得开发者能够更方便地理解和应用这个框架。 手册中的知识点主要包括以下几个方面: 1. **...
ExtJS 3.2 聊天室程序(类Q_Q群)
ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。功能丰富,无人能出其右。无论是界面之美,还是功能之强,ext的表格控件都... ExtJs 3.2 中文API帮助文档,CHM离线的,希望对大家有帮助
我收集了各种ExtJS的例子,有3.2还有2.5,还有所有“掏钱学ExtJS”的例子,绝对物超所值。
网络上流传很多exjs 中文API,都神马东西,下载都没用。现在鄙人从脚本娃娃群分享的完整API上传分享给大家!
EXTJS 3.2-3.3版本是EXTJS框架的一个重要阶段,它提供了大量的组件、布局、数据绑定和事件处理机制,为开发者带来了强大的功能和灵活性。 EXTJS 3.2-3.3中文API文档是学习和开发EXTJS应用的重要参考资料。CHM...
Ext3.2中文API及代码示例,经典的API翻译,丰富的代码示例 就在这里等着你下!
ExtJs3.2的资源包,需要的朋友可以下载
在本文中,我们将详细介绍如何在Eclipse环境中安装适用于ExtJS 3.2的Spket插件,以便于JavaScript开发和代码提示。首先,让我们了解一下Eclipse、ExtJS和Spket这三个关键概念。 Eclipse是一款开源的集成开发环境...
Learning ExtJS 3.2.pdf绝对的高清,不过是英文的,下载之前考虑好,不想骗你们的分,呵呵
这是一个extjs3.2的中文API文档,可以用于学习。
技术: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是Sencha公司开发的一款用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件和强大的数据绑定机制。SSH(Spring、Struts、Hibernate)则是一种常见的Java Web开发框架组合,用于处理后端业务逻辑和...