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