您的位置:首页 > Web前端 > extjs > 正文

Extjs中FieldSet的收缩和展开

更多 时间:2013-7-18 类别:extjs 浏览量:8615

Extjs中FieldSet的收缩和展开

Extjs中FieldSet的收缩和展开

一、Extjs的Fieldset控件中有一个属性checkboxToggle


这个属性在设置为true的时候,fieldset在title就会多出一个checkbox,当勾选这个checkbox时,这个fieldset就会展开和收缩

 

二、此外还有一个属性是collapsible,这个也是用来做展开和收缩的


与checkboxToggle不一定的时,这个出来的是一个小三角

   

这两个收缩/展开属性可以同时为true,当它们同时为true时,checkbox和小三角会同时出现


可能有的人会觉得这两个属性是不是重复了,其实并没有,这是因为checkboxToggle属性还有两个配合的属性:onCheckClick和checkboxName属性

onCheckClick属性是一个函数,用来替代默认的收缩/展开函数,外加上checkboxName,可以在onCheckClick函数中知道checkbox的勾选情况,从而来做一些事情,如:如果fieldset里面是一个CheckBoxGroup,那么可以根据fieldset的checkBox情况,来全选checkBoxGroup。

    

三、Extjs中FieldSet其它属性和方法:


1、labelWidth : Number
 
标签的宽度,该属性会影响下级的子容器。


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


 
3、baseCls : String
 
作用在面板元素上的CSS样式类 (默认为 'x-panel')。


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



5、animCollapse : Boolean
 

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


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


 
7、frame : Boolean
 
True表示为面板的边框外框可自定义的,false表示为边框可1px的点线(默认为false)。
 

 
8、border : Boolean
 
True表示为显示出面板body元素的边框,false则隐藏(缺省为true),默认下,边框是一套2px宽的内边框,但可在#bodyBorder中进一步设置



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


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


11、autoScroll : Boolean
 

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


 
12、floating : Boolean
 
True表示为浮动此面板(带有自动填充和投影的绝对定位),false表示为在其渲染的位置"就近"显示(默认为false)。
设置floating为true,将会在面板元素的基础上创建一个Ext.Layer 同时让面板显示到非正数的坐标上去了,不能正确显示。因此面板必须精确地设置渲染后的位置,也就是使用绝对的定位方式。(如:myPanel.setPosition(100,100);)若一个浮动面板是没有固定其宽度的,这导致面板会填满与视图右方的区域。 该属性也可以是创建那个Ext.Layer对象所用的配置项对象。


 
13、shadow : Boolean/String
 
True 表示为(或一个有效Ext.Shadow#mode值)在面板后显示投影效果(默认为'sides'四边)。 注意此项只当floating = true时有效。


 
14、shadowOffset : Number
 
投影偏移的象素值(默认为4)。注意此项只当floating = true时有效。


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


  
16、draggable : Boolean
 

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


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


 
18、disabled : Boolean
 

渲染该组件为禁用状态的(默认为false)。


 
19、autoHeight : Boolean
 

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


 
20、collapsedCls : String
 
当面板闭合时,面板元素的CSS样式类 (默认为 'x-panel-collapsed')。


 
21、headerAsText : Boolean
 
True表示为显示面板头部的标题(默认为 true)。


 
22、buttonAlign : String
 
在此面板上的按钮的对齐方式,有效值是'right,' 'left' and 'center'(默认为 'right')。


 
23、collapsed : Boolean
 
True 表示为渲染面板后即闭合(默认为false)。



24、collapseFirst : Boolean
 

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


  
25、minButtonWidth : Number

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


 
26、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
 


 
27、items : Mixed
 
一个单独项,或子组件组成的数组,加入到此容器中。 每一项的对象类型是基于Ext.Component的你可传入一个组件的配置对象即是lazy-rendering的做法,这样做的好处是组件不会立即渲染,减低直接构建组件对象带来的开销。 要发挥"lazy instantiation延时初始化"的特性,应对组件所属的登记类型的Ext.Component#xtype属性进行配置。要了解所有可用的xtyps,可参阅Ext.Component。如传入的单独一个项,应直接传入一个对象的引用( 如items: {...})。多个项应以数组的类型传入(如items: [{...}, {...}])。


 
28、defaults : Object
 

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


 
29、hideBorders : Boolean
 
True表示为隐藏容器下每个组件的边框,false表示保留组件现有的边框设置(默认为false)。
 

本文地址:http://www.studyofnet.com/news/18.html