`
qinya06
  • 浏览: 600532 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

动态 添加 fieldSet

阅读更多
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();
分享到:
评论

相关推荐

    jquery fieldset和legend标签代码.zip

    解压后的文件"804"可能是HTML、CSS和JavaScript文件的组合,其中HTML文件包含了`<fieldset>`和`<legend>`标签的结构,CSS文件提供了基础样式,而JavaScript(可能是jQuery)文件则负责添加动态效果和交互功能。...

    js控制fieldset高度的代码

    为了更好地实现动态调整`<fieldset>`高度的需求,可以考虑以下几点扩展和优化建议: 1. **动态调整**:可以根据窗口大小变化来自动调整`<fieldset>`的高度,使其更加适应响应式设计。 2. **动画效果**:通过CSS过渡...

    fieldset相关的总结

    - 博客频道 - CSDN_NET.mht”可能包含了更详尽的示例和实践技巧,例如如何利用`<fieldset>`进行条件性显示某些表单部分,或者如何通过JavaScript和jQuery来控制`<fieldset>`的行为,比如禁用整个字段集或动态添加/...

    Javascript 动态添加表单实例

    例如,可以先创建一个顶级`<form>`元素,然后根据需要添加`<fieldset>`、`<label>`、`<input>`等子元素。同时,还可以使用事件监听器(如`addEventListener()`)为这些元素绑定功能,如提交表单或验证输入。 `...

    可收放的HTML fieldset

    在"可收放的HTML fieldset"实现中,我们通常会利用JavaScript或者CSS来添加交互性。这里提到的模仿MSDN的可收放Fieldset,可能是指微软开发者网络(MSDN)网站上的一种实现方式,它们通常会使用自定义的图形和动画...

    Ext.form.FieldSet的用法.pdf

    4. **itemCls**:你可以通过此配置项为 FieldSet 添加额外的 CSS 类,这将影响到 FieldSet 内的所有元素,包括表单字段、标签等。在 `FormLayout` 布局下,此设置才有效。 5. **baseCls**:这是应用于 FieldSet ...

    Ext.form.FieldSet的用法.docx

    1. **checkboxToggle**: 如果设置为`true`,FieldSet会在legend标签前添加一个复选框,用户可以通过勾选这个复选框来展开或折叠FieldSet。你可以传递一个DOMHelper配置对象来定制这个复选框的外观。 2. **checkbox...

    fieldset标签定义说明.docx

    1. `disabled`属性:如果将此属性添加到`<fieldset>`,那么字段集中所有的表单元素都将默认处于禁用状态,用户无法与它们交互。 2. `form`属性:允许你指定该字段集关联的表单,即使它不在该表单的范围内。这有助于...

    HTML中fieldset标签概述及使用方法

    3. **隐藏或显示部分表单**:结合JavaScript,`<fieldset>`可以用来动态隐藏或显示表单部分,根据用户的选择来显示相关的内容。 4. **增强可访问性**:对于辅助技术用户,`<fieldset>`和`<legend>`提供了更好的上...

    jquery fieldset和legend标签特效代码

    1. **动态样式切换**:使用jQuery选择器找到所有的 `<fieldset>` 和 `<legend>` 元素,然后在用户交互时(如鼠标悬停或点击)添加或删除CSS类,改变边框颜色、字体样式等。 2. **动画效果**:利用jQuery的动画功能,...

    FieldSetView:FieldSetView是一个Android自定义视图,它模仿html中的“ fieldset”标签

    将以下内容添加到您的项目级别build.gradle中: allprojects { repositories { maven { url "https://jitpack.io" } } } 将此添加到您的应用程序build.gradle中: dependencies { compile '...

    EXT4.3实现动态表单全动态

    通过`Ext.form.FieldSet`和`Ext.container.Container`等类,开发者可以构建复杂的动态表单结构。 - **动态生成**:开发者可以通过编程方式动态生成表单元素,例如使用`Ext.Component`或`Ext.form.field.Base`的子类...

    js页面中添加 ---左右添加多选框

    在JavaScript页面开发中,"左右添加多选框"通常指的是创建一种交互式用户界面,其中包含可以被用户选中或取消选中的复选框,并且这些复选框以某种方式排列,例如从左到右或者分列显示。这种布局常见于需要用户进行多...

    HTML5+CSS3超酷动态表单

    同时,CSS3还引入了`transition`属性,允许我们在元素状态改变时添加平滑过渡效果。对于输入框,可以设置边框颜色和阴影的过渡时间,使高亮效果更自然: ```css input { transition: border-color 0.3s, box-shadow...

    jqueryMobile 动态添加元素,展示刷新视图的实现方法

    在动态添加元素并展示刷新视图方面,jQuery Mobile 提供了一系列的方法来实现这一需求。本文将会详细阐述在jQuery Mobile中动态添加不同类型的元素如文本域、输入框、组合选择框、列表视图、滑动控件、切换开关以及...

    ASP.NET jQuery 实例8 (动态添加内容到DropDownList)

    首先准备好页面代码: 代码如下: ... ”left”> <fieldset xss=removed> <p> 选择颜色</p> ”0″ cellspacing=”0″ border=”0″> <tr> <td> </td> <td> ”ddlFirst” runat=”server”> ”” Text=”—></asp:List

    Ext 动态加载表单数据

    我们可以设置表单的`fields`属性来动态添加或更新字段,这通常基于接收到的JSON数据。 4. **Ext.form.FieldSet**:如果表单数据复杂,可以使用FieldSet来组织字段,FieldSet是一个可折叠的容器,可以包含多个字段。...

    vue实现学生录入系统之添加删除功能

    一.案例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">... fieldset{ ... fieldset input{ width: 200px; height: 30px; margin: 10px 0; } table{ width

    Ext 添加功能form表单实例

    字段集(`fieldset`)是一种特殊的容器,用于分组相关的字段,并可以添加标题和折叠功能,如`{xtype:'fieldset', title:'角色信息', labelWidth:20, id:'rolesList', name:'rolesList', collapsible:true, autoHeight:...

Global site tag (gtag.js) - Google Analytics