Ext.form.FormPanel定义的参数说明

1、formId : String

(可选的)FORM标签的id(默认是自动生成的)。

2、labelWidth : Number

标签的宽度。该属性级联于子容器。

3、 itemCls : String

关于容器的表单项元素的额外的CSS样式(默认为"",如容器的itemCls有设置的话就用那个值)。由于该样式是作用于整个条目容器的,这就会对在内的表单字段、label元素(若有指定)或其他元素只要属于条目内的元素都有效。

此组件只有在Ext.form.FormLayout FormLayout布局管理器控制的容器下渲染才有用。

4、buttons : Array

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

5、buttonAlign : String

在此面板上的按钮的对齐方式,有效值是‘right,‘ ‘left‘ and ‘center‘(默认为 ‘right‘)

6、  minButtonWidth : Number

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

7、labelAlign : String

有效值为"left," "top" 和 "right" (默认为"left")。该属性级联于没有设定此属性的子容器。

8、monitorValid : Boolean

true表示为通过不断触发一个事件,来监视有效值的状态(在客户端进行)

该项须绑定到有配置项formBind:true的按钮的

9、monitorPoll : Number

检验valid state的间隔毫秒数,如monitorValid非真则忽略改项(默认为200)。

10、bodyCfg : Object

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

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

11、headerCfg : Object

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

12、footerCfg : Object

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

13、applyTo : Mixed

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

14、tbar : Object/Array

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

15、bbar : Object/Array

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

16、header : Boolean

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

17、footer : Boolean

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

18、title : String

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

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样式类,用于面板头部的图标:(默认为‘‘)。

自定义图标的样式的示例: An example of specifying a custom icon class would be something like:

25、collapsible : Boolean

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

26、tools : Array

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


id


String


必选项,Required. 创建tool其类型。默认下有x-tool-<tool-type>样式分配的了就表示这是一个tool元素。 Ext自带一些css样式,吻合于各种tool的按钮样式需求。开发人员也可以自己弄一些css样式和背景图来修改图标


handler


Function


必须的,点击按钮后触发的处理函数,它传入的参数有:

event : Ext.EventObject 单击事件。The click event.

toolEl : Ext.Element工具元素(tool Element)

panel : Ext.Panel面板。tc : Ext.Panel


scope


Object


处理函数的执行范围


qtip


String/Object


为按钮指定提示信息,可以是字符串或配置对象Ext.QuickTip#register的配置参数。


hidden


Boolean


设置初次渲染时,是否隐藏


on


Object


为按钮配置事件监听器。特定事件侦听器的配置对象,格式形如#addListener的参数。 侦听器的配置对象格式应如#addListener

tools配置项id与按钮图标对应关系表

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)。

Ext.form.FormPanel定义的参数说明

时间: 2024-10-13 01:55:01

Ext.form.FormPanel定义的参数说明的相关文章

Ext JS表单Ext.form.FormPanel

1.表单 对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的.而对于ExtJS应用来说,则可以直接使用FormPanel控件来存放表单中的元素.FormPanel继承自Panel,在Panel的基础上提供与表单相关的各种特性,比如可以指定表单提交的url.指定表单提交方式.是否是二进制提交等:另外FormPanel固定使用form布局,前面关于布局一节中的内容我们说过,form布局也就是专门用于组织包含输入元素的布局. 看下面的代码: 1 Ext.onReady(funct

ExtJs 第二章,Ext.form.Basic表单操作

1.认识Ext.form.Panel表单面板         Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 checkboxgroup Ext.form.field.ComboBox 下拉列表框 combo Ext.form.field.Date 日期选择框 datefield Ext.form.field.Display 文本展示组件 displayfield Ext.form.FieldContai

ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html ------------------------------------------------------------------------------------------- Ext.form.Field是所有表单输入控件的基类,其他的输入控件都是基于Ext.form.Field扩展得来的. Ext.form.Field

ExtJS4.2学习(17)表单基本输入控件Ext.form.Field

Ext.form.Field是所有表单输入控件的基类,其他的输入控件都是基于Ext.form.Field扩展得来的. Ext.form.Field中定义了输入控件通用的属性和功能函数,这些通用的属性和功能函数大致分为3大类:页面显示样式.控件参数配置和数据有效性检验.我们先来看看表单输入控件可以使用的校验显示方式.默认情况下,这些输入控件会监听blur事件,如果数据校验失败,就会根据msgTarget中的设置显示错误信息.通常,msgTarget会被设置为qtip,即使用QuickTip显示错误

Ext.form.Panel表单面板

1.Ext.form.FormPanel支持的主要表单组件 ExtJS表单组件 说明 Xtype类型 Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 checkboxgroup Ext.form.field.ComboBox 下拉列表框 combo Ext.form.field.Date 日期选择框 datefield Ext.form.field.Display 文本显示组件 displayfield

EXt form属性

配置项: success:执行成功后回调的函数,包括两个参数:form和action failure:执行失败后回调的函数,包括两个参数:form和action method:表单的提交方式,有效值包括GET.POST params:传递到请求中的参数 url:动作提交的路径 waitMsg:动作执行时显示的等待信息 属性: Action.CLIENT_INVALID:客户端验证错误 Action.CONNECT_FAILURE:通信错误 Action.LOAD_FAILURE:加载数据时,没有

Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法

Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法 在上一篇笔记中我们介绍了Ext.Net的简单用法,并创建了一个简单的登录表单.今天我们将看一下如何更好是使用FormPanel,包括使用字段默认值.Checkbox Grouping和Radio Button Grouping等. 为FormPanel设置默认值 在Form中设置FieldDefaults标签可以设置字段属性的默认值.来看一下我们的用法: <FieldDefaults LabelWidth="60&q

Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation)

Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation) 作为表单,字段验证当然是不能少的,今天我们来一起看看Ext.Net FormPanel的字段验证功能. 约束功能 为了防止用户输入不合法的数据,我们可以使用约束功能来限制用户的输入,例如TextField的 MinLength/MaxLength,NumberField的MinValue/MaxValue,DateField的MinDate /MaxDate等属性,它们可以将用户输入的值限定在一个合

ExtJs2.0里Ext.form.Radio水平排列布局

ExtJs2.0好像不支持单选框组,因此用两个name相同单选框来实现单选框组 var radio1 = new Ext.form.Radio({boxLabel:'男',name:'sex',id:'yes',inputValue:'0',width : 150, height : 20}); var radio2 = new Ext.form.Radio({boxLabel:'女',name:'sex',id:'no',inputValue:'1', width : 150,height :