最近公司的一个项目中需要用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')); });