ExtJS笔记--Ext.form.FieldSet

最新推荐文章于 2022-11-01 00:25:29 发布

xiaoshang

最新推荐文章于 2022-11-01 00:25:29 发布

阅读量1.4k

点赞数

分类专栏： ExtJS

ExtJS 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

类全称： Ext.form.FieldSet

继承自于： Ext.Panel

针对某一组字段的标准容器。

配置项

1、checkboxToggle : Mixed

True表示在lengend标签之前fieldset的范围内渲染一个checkbox，或者送入一个DomHelper的配置对象制定 checkbox（默认为false）。选择该checkbox会为展开、收起该面板服务。

2、checkboxName : String

分配到fieldset的checkbox的名称，在#checkboxToggle = true的情况有效。（默认为'[checkbox id]-checkbox'）。

3、labelWidth : Number

标签的宽度，该属性会影响下级的子容器。

4、itemCls : String

关于容器的表单项元素的额外的CSS样式（默认为""，如容器的itemCls有设置的话就用那个值）。由于该样式是作用于整个条目容器的，这就会对在内的表单字段、label元素（若有指定）或其他元素只要属于条目内的元素都有效。此组件只有在Ext.form.FormLayout FormLayout布局管理器控制的容器下渲染才有用。

5、baseCls : String

作用在面板元素上的CSS样式类（默认为 'x-panel'）。

6、layout : String

7、此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定#layoutConfig进一步配置。

8、animCollapse : Boolean

True 表示为面板闭合过程附有动画效果（默认为true，在类 Ext.Fx 可用的情况下）。

9、bodyCfg : Object

构成面板#body元素的Ext.DomHelper DomHelper配置对象。

这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。

10、headerCfg : Object

面板#header元素的结构，符合Ext.DomHelper DomHelper配置的格式。

11、footerCfg : Object

面板#footer元素的结构，符合Ext.DomHelper DomHelper配置的格式。

12、applyTo : Mixed

节点的id,或是DOM节点，又或者是与DIV相当的现有元素，这些都是文档中已经存在的元素当使用applyTo后，主元素所指定的id或CSS样式类将会作用于组件构成的部分，而被创建的组件将会尝试着根据这些markup构建它的子组件。使用了这项配置后，不需要执行render()的方法。若指定了applyTo，那么任何由#renderTo传入的值将会被忽略并使用目标元素的父级元素作为组件的容器。

13、tbar : Object/Array

面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用#getTopToolbar的方法代替。

14、bbar : Object/Array

面板底部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象，或由按钮配置项对象构成的数组，以加入到工具条中。注意，此项属性渲染过后就不可用了，应使用#getBottomToolbar的方法代替。

15、header : Boolean

True表示为显式建立头部元素，false则是跳过创建。缺省下，如不创建头部，将使用#title的内容设置到头部去，如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。

16、footer : Boolean

True表示为显式建立底部元素，false则是跳过创建。缺省下，就算不声明创建底部，若有一个或一个以上的按钮加入到面板的话，也创建底部，不指定按钮就不会生成。

17、title : String

显示在面板头部的文本标题(默认为'')。如有指定了titile那么头部元素(head)会自动生成和显示，除非#header强制设为false。如果你不想在写配置时指定好title，不过想在后面才加入的话，你必须先指定一个非空的标题（具体说是空白字符''亦可或header：true），这样才保证容器元素生成出来。

18、buttons : Array

在面板底部加入按钮，Ext.Button配置的数组。

19、autoLoad : Object/String/Function

一个特定的url反馈到Updater的Ext.Updater#update方法。若autoLoad非null，面板会尝试在渲染后立即加载内容。同时该面板#body元素的默认URL属性就是这URL，所以可随时调用Ext.Element#refresh refresh的方法。

20、frame : Boolean

True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。

21、border : Boolean

True表示为显示出面板body元素的边框，false则隐藏（缺省为true），默认下，边框是一套2px宽的内边框，但可在#bodyBorder中进一步设置

22、bodyBorder : Boolean

True表示为显示出面板body元素的边框，false则隐藏（缺省为true），只有#border == true时有效。若border == true and bodyBorder == false，边框则为1px宽，可指定整个body元素的内置外观。

23、bodyStyle : String/Object/Function

制定body元素的CSS样式。格式形如Ext.Element#applyStyles（缺省为null）。

24、iconCls : String

一个能提供背景图片的CSS样式类，用于面板头部的图标：（默认为''）。

25、collapsible : Boolean

True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条。 false表示为保持面板为一个静止的尺寸（缺省为false）

26、tools : Array

一个按钮配置组成的数组，加入到头部的工具条区域。渲染过程中，每一项工具都保存为Ext.Element Element对象，都集中保存在属性tools.<tool-type>之中。

27、toolTemplate : Ext.Template/Ext.XTemplate

位于#header中的tools其模板是什么。默认是：

28、hideCollapseTool : Boolean

True表示为不出展开/收缩的轮换按钮，当#collapsible = true，false就显示（默认为false）。

29、titleCollapse : Boolean

True表示为允许单击头部区域任何一个位置都可收缩面板（当#collapsible = true）反之只允许单击工具按钮（默认为false）。

30、autoScroll : Boolean

True表示为在面板body元素上，设置overflow：'auto'和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。

31、floating : Boolean

True表示为浮动此面板（带有自动填充和投影的绝对定位），false表示为在其渲染的位置"就近"显示（默认为false）。

设置floating为true，将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了，不能正确显示。因此面板必须精确地设置渲染后的位置，也就是使用绝对的定位方式。（如：myPanel.setPosition(100,100);）若一个浮动面板是没有固定其宽度的，这导致面板会填满与视图右方的区域。

该属性也可以是创建那个Ext.Layer对象所用的配置项对象。

32、shadow : Boolean/String

True 表示为（或一个有效Ext.Shadow#mode值）在面板后显示投影效果（默认为'sides'四边）。注意此项只当floating = true时有效。

33、shadowOffset : Number

投影偏移的象素值（默认为4）。注意此项只当floating = true时有效。

34、shim : Boolean

False表示为禁止用iframe填充，有些浏览器可能需要设置（默认为true）。注意此项只当floating = true时有效

35、html : String/Object

一段HTML片段，或Ext.DomHelper DomHelper配置项作为面板body内容（默认为 ''）。面板的afterRender方法负责HTML内容的加入这一过程

，所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比#contentEl的显示位置而居前。

36、contentEl : String

用现有HTML节点的内容作为面板body的内容（缺省为''）。面板的afterRender方法负责了此HTML元素的加入到面板body中去。该部分的内容又比#html HTML的显示位置而居后，所以render事件触发的时刻document还没有所说的HTML内容。

37、keys : Object/Array

KeyMap的配置项对象（格式形如:Ext.KeyMap#addBinding）。可用于将key分配到此面板（缺省为null）。

38、draggable : Boolean

虽然Ext.Panel.DD是一个内部类并未归档的，但亦可自定义拖放（drag/drop）的实现，具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类，所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为：

39、tabTip : String

tooltip的innerHTML字符串（也可以html标签），当鼠标移至tab时会显示。这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。

40、disabled : Boolean

渲染该组件为禁用状态的（默认为false）。

41、autoHeight : Boolean

True表示为使用height:'auto'，false表示为使用固定高度（缺省为false）。注意：尽管许多组件都会继承该配置选项，但是不是全部的'auto' height都有效。 autoHeight:true的设定表示会依照元素内容自适应大小，Ext就不会过问高度的问题。

42、collapsedCls : String

当面板闭合时，面板元素的CSS样式类（默认为 'x-panel-collapsed'）。

43、maskDisabled : Boolean

True表示为当面板不可用时进行遮罩（默认为true）。当面板禁用时，总是会告知下面的元素亦要禁用，但遮罩是另外一种方式同样达到禁用的效果。

44、headerAsText : Boolean

True表示为显示面板头部的标题（默认为 true）。

45、buttonAlign : String

在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'（默认为 'right'）。

46、collapsed : Boolean

True 表示为渲染面板后即闭合（默认为false）。

47、collapseFirst : Boolean

True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方（默认为true）。

48、minButtonWidth : Number

此面板上按钮的最小宽度（默认为75）。

49、unstyled : Boolean

不带样式渲染面板。

50、elements : String

面板渲染后，要初始化面板元素的列表，用逗号分隔开。正常情况下，该列表会在面板读取配置的时候就自动生成，假设没有进行配置，但结构元素有更新渲染的情况下，就可根据指值得知结构元素是否已渲染的（例如，你打算在面板完成渲染后动态加入按钮或工具条）。加入此列表中的这些元素后就在渲染好的面板中分配所需的载体（placeholders）。有效值是：

header

tbar (top bar)

body

bbar (bottom bar)

footer

缺省为'body'. Defaults to 'body'.

51、monitorResize : Boolean

Ture表示为自动监视window resize的事件，以处理接下来一切的事情，包括对视见区（viewport）当前大小的感知，一般情况该值由#layout调控，而无须手动设置。

52、layoutConfig : Object

选定好layout布局后，其相应的配置属性就在这个对象上进行设置。（即与#layout配置联合使用）有关不同类型布局有效的完整配置信息，

参阅对应的布局类：

Ext.layout.Absolute

Ext.layout.Accordion

Ext.layout.AnchorLayout

Ext.layout.BorderLayout

Ext.layout.CardLayout

Ext.layout.ColumnLayout

Ext.layout.FitLayout

Ext.layout.FormLayout

Ext.layout.TableLayout

53、bufferResize : Boolean/Number

当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。

54、activeItem : String/Number

组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。

55、items : Mixed

一个单独项，或子组件组成的数组，加入到此容器中。每一项的对象类型是基于Ext.Component的

你可传入一个组件的配置对象即是lazy-rendering的做法，这样做的好处是组件不会立即渲染，减低直接构建组件对象带来的开销。要发挥"lazy instantiation延时初始化"的特性，应对组件所属的登记类型的Ext.Component#xtype属性进行配置。

要了解所有可用的xtyps，可参阅Ext.Component。如传入的单独一个项，应直接传入一个对象的引用（如items: {...}）。多个项应以数组的类型传入（如items: [{...}, {...}]）。

56、defaults : Object

应用在全体组件上的配置项对象，无论组件是由#items指定，抑或是通过#add、#insert的方法加入，都可支持。缺省的配置可以是任意多个容器能识别的“名称/值”，假设要自动为每一个Ext.Panel项设置padding内补丁，你可以传入defaults: {bodyStyle:'padding:15px'}。

57、autoDestroy : Boolean

若为true容器会自动销毁容器下面全部的组件，否则的话必须手动执行销毁过程（默认为true）。

58、hideBorders : Boolean

True表示为隐藏容器下每个组件的边框，false表示保留组件现有的边框设置（默认为false）。

59、defaultType : String

容器的默认类型，用于在Ext.ComponentMgr中表示它的对象。（默认为'panel'）

60、x : Number

如果该组件是在一个定位的组件之中，可通过该属性返回组件的x本地（左边）坐标。

61、y : Number

如果该组件是在一个定位的组件之中，可通过该属性返回组件的y本地（顶部）坐标。

62、pageX : Number

如果该组件是在一个定位的组件之中，可通过该属性返回组件的x页面坐标。

可选的fieldset实例
其实就是带个chechbox，有点像论坛注册时有一部分是选填信息的那种效果，主要知识点：

// 因为觉得这个参数特别，特举一例以说明
1.checkboxToggle: true // true则呈现一个带checkbox的fieldset，选中则展开，否则相反，默认为false
2.checkboxName:string // 当上面为true时，作为checkbox的name，方便表单操作

这里我把js核心代码贴出来(html代码与上一篇中完全相同，不列出)：

// 在上一节的基础代码的items里面添加如下配置
{
xtype:"fieldset",
checkboxToggle: true,//关键参数，其他和以前的一样
checkboxName:"dfdf",
title:"选填信息",
defaultType:'textfield',
width:330,
autoHeight: true,//使自适应展开排版
items:[{
    fieldLabel:"UserName",
    name:"user",
    anchor:"95%" // 330px-labelWidth剩下的宽度的95%，留下5%作为后面提到的验证错误提示
  },
  {
    fieldLabel:"PassWord",
    inputType:"password", // 密码文本
    name:"pass",
    anchor:"95%"
  }]
}

4.表单验证实例（空验证，密码确认验证，email验证）
我们可以用单独的js写表单验证，但是extjs已经为我们想到了（自己单独写反而不方便）。
在验证之前，我不得不提两个小知识点：

// 大家在很多的extjs代码中都看到了这两个，他们都起提示作用的
Ext.QuickTips.init(); // 支持tips提示
Ext.form.Field.prototype.msgTarget='side'; // 提示的方式，枚举值为"qtip","title","under","side",id(元素id)
// side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示，其他的我就不介绍了，可自行验证
// 大家可以分别去掉这两行代码，看效果就会明白他们的作用，（放在onReady的function（）{}中）

1.我们看一个最简单的例子：空验证（其实这不算是一个专门的验证例子）

// 空验证的两个参数
1.allowBlank: false // false则不能为空，默认为true
2.blankText:string // 当为空时的错误提示信息

js代码为：

var form1 = new Ext.form.FormPanel({
       width:350,
       frame: true,
       renderTo:"form1",
       labelWidth:80,
       title:"FormPanel",
       bodyStyle:"padding:5px 5px 0",
       defaults:{width:150,xtype:"textfield",inputType:"password"},
       items:[
               {fieldLabel:"不能为空",
                allowBlank: false, // 不允许为空
                 blankText:"不能为空，请填写", // 错误提示信息，默认为This field is required!
                id:"blanktest",
                anchor:"90%"
               }
       ]
    });

2.用vtype格式进行简单的验证。
在此举邮件验证的例子，重写上面代码的items配置:

items:[
               {fieldLabel:"不能为空",
                vtype:"email", // email格式验证
                vtypeText:"不是有效的邮箱地址", // 错误提示信息,默认值我就不说了
                id:"blanktest",
                anchor:"90%"
               }

你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证：

// form验证中vtype的默认支持类型
1.alpha // 只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum // 只能输入字母和数字，无法输入其他
3.email // email验证，要求的格式是"langsin@gmail.com"
4.url // url格式验证，要求的格式是http://www.langsin.com

3.确认密码验证（高级自定义验证）
前面的验证都是extjs已经提供的验证，我们也可以自定义验证函数，比上面要复杂点了。我们一起做一个密码确认的例子。
我们修改前面的代码：

// 先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字）
Ext.apply(Ext.form.VTypes,{
    password: function(val,field){ // val指这里的文本框值，field指这个文本框组件，大家要明白这个意思
        if(field.confirmTo){ // confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
            var pwd=Ext.get(field.confirmTo); // 取得confirmTo的那个id的值
            return (val==pwd.getValue());
       }
        return true;
    }
});
// 配置items参数
items:[{fieldLabel:"密码",
                id:"pass1",
                anchor:"90%"
               },{
                fieldLabel:"确认密码",
                id:"pass2",
                vtype:"password", // 自定义的验证类型
                  vtypeText:"两次密码不一致！",
                  confirmTo:"pass1", // 要比较的另外一个的组件的id
                anchor:"90%"
               }

关于vtype的内容还有很多内容要挖掘，但现在我们就点到这里为止，以后有机会再讨论它的其他高级验证。
不知不觉中写了这么多，大家都要歇息了，我们下次再接着讨论，