动态添加 fieldSet

最新推荐文章于 2023-04-19 09:52:57 发布

zyuanq

最新推荐文章于 2023-04-19 09:52:57 发布

阅读量382

点赞数

CC 4.0 BY-SA版权

分类专栏： ext基础文章标签： EXT F# XML HTML

本文链接：https://blog.youkuaiyun.com/zyuanq/article/details/83672005

ext基础专栏收录该内容

72 篇文章

订阅专栏

本文介绍使用ExtJS框架时如何正确地动态添加并管理FieldSet组件，避免表单验证出现错误。通过调整FieldSet与FormPanel之间的关联方式，确保在动态添加或移除FieldSet时，所有字段能够正常进行验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XML/HTML代码

//Create the Form    
  testForm = new Ext.form.FormPanel({    
      name: "form1",    
      frame:true,    
      width: 350,    
      items: [{    
          xtype: "textfield",    
          name: "nom",    
          fieldLabel: "nom",    
          allowBlank: false    
      }]            
  });    
  //Render the form    
  testForm.render(Ext.get('idForm'));        
  //Create the fieldset    
  testFieldSet = new Ext.form.FieldSet({    
      name: 'testFieldSet',    
      autoHeight: true,    
      items: [{    
              xtype : "textfield",    
              name : "testtextvalid",    
              fieldLabel: "testDyn",    
              allowBlank: false    
          }]    
  });    
  testForm.add(testFieldSet); //add the fieldset to the formpanel    

  testForm.doLayout();    
===========this is the workaround============         
  testFieldSet.form = testForm.getForm();    
  testForm.initFields.call(testFieldSet);    
  //delete testForm.form;原来是有这一行的，但加上后连getForm()都不好用了，去掉就没问题了    
===========this is the workaround============   
OK，一切恢复正常！

=================================================================================================

workaround部分仅对动态增加FieldSet时有用，而如果被添加的FieldSet可以被删除（remove或者destroy）时，校验仍然会产生错误的，此时必须将FieldSet中的每一个Field在BaseForm中remove掉。
代码如下

var f = fieldset.form || fieldset.ownerCt.getForm();
fieldset.items.each(function(item) {
    f.remove(item);
});
fieldset.destroy();

动态 添加 fieldSet

动态添加 fieldSet