Ext.FieldSet

  Ext学习系列(5)-- <wbr>Ext.FieldSet

1、Ext.FieldSet参数内容

FieldSet组件,它继承自panel.其中属性可参考panel。

checkboxToggle : bool

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

参数内容放到后面

例:

  Ext.onReady(function() {
            var L1 = new Ext.form.FormPanel({
                width: 400,
                height: 400,
                renderTo: "divID1",
                title: "FieldSet",
                frame: true,
                items: [
                //FieldSet例1
                new Ext.form.FieldSet({
                    title: "FieldSet例1",
                    width: 380,
                    height: 100,
                    checkboxToggle: true//true则呈现一个带checkbox的fieldset,选中则展开,否则相反,默认为false
                }),

 

                // 单选按钮组
                new Ext.form.FieldSet({
                    title: "单选按钮组",
                    width: 380,
                    height: 100,
                    checkboxToggle: true,
                    items: [
                    new Ext.form.Radio({ boxLabel: "单选1", id: "Radio1", name: "a" }),
                    new Ext.form.Radio({ boxLabel: "单选2", id: "Radio2", name: "a", checked: true })

                    ]
                }),

 

 

                //多选按钮组
                new Ext.form.FieldSet({
                    title: "多选按钮组",
                    width: 380,
                    height: 100,
                    checkboxToggle: true,
                    items: [
                    new Ext.form.Checkbox({ boxLabel: "多选1" }),
                    new Ext.form.Checkbox({boxLabel:"多选2",id:"checkbox1",checked:true})
                    ]
                })

                ]

 

            });
        });

 

参数:

类全称: 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

不带样式渲染面板。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值