首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Ext Form全攻略一(转)

2012-11-13 
Ext Form全攻略1(转)1 Form概述Formpanel是一个重要的页面组件,在具体的应用开发中,信息的添加和修改,数据

Ext Form全攻略1(转)
1 Form概述
Formpanel是一个重要的页面组件,在具体的应用开发中,信息的添加和修改,数据的提交和加载, 都离不开formpanel的支持。Formpanel自动实现了form布局模式。
  虽然没有列出的选项,配置FormPanel一样,FormPanel类还接受了所有的配置选项要求配置内部Ext.form.BasicForm为文件上传或提供的功能,验证并递交了加载形式。
  注:如果子类FormPanel,任何配置选项为BasicForm必须适用于initialConfig FormPanel属性运用BasicForm设置这并不会影响到BasicForm的配置。
Basciform是一个有用的类,主要用来管理formpanel中的form元素,实现数据加载,获取,和数据集校验。


2 常用表单组件
继承关系分析如下:

在这里应该充分利用继承的特性,在父类已经定义了的属性,之类依然可以访问。
附:javascript本来没得类这个概念,但是JS得原型实现了类对象的功能,所以我们都称之为类。
下面针对常用的组件关键属性进行讲解。
2.1 Field
根据上面的分析图形可以看出,几乎所有的formpanel组件都是继承此类,其中有一个容易被忽略的属性:inputType。很多人可能会问:怎么没有看见密码组件,文件上传组件呢?这个属性就是解决这个问题的。
如果我们把inputType分别设置为password和file,则效果如图所示:
密码控件:      
文件上传:
ExtJS3.0中,新增了一个ux文件夹,专门收集用户扩展的控件,其中提供了对file控件的支持,具体例子参加example。
Value:这个属性的类型是mixed,意思就是说:和此控件的类型有关。

---常用属性---
Field是继承自boxComponent。我们知道component中有个属性是autoEl,此属性用来自定义创建组件的。比如要创建一个图片组件:
var myImage = new Ext.BoxComponent({
    autoEl: {
        tag: 'img',
        src: '/images/my-image.jpg'
    }
});
而这里的autoCreate是用来创建默认的文本组件的,默认值为:
{tag: "input", type: "text", size: "20", autocomplete: "off"}
Cls:自定义的样式作用于此控件
FieldClass:默认的样式作用于此控件 x-form-field
FocusClass:默认的获得焦点的样式 x-form-focus
InvalidClass:默认的校验样式 x-form-invalid
MsgTarget:当文本框中的值不满足校验时显示的提示方式
ReadOnly:使控件只读【如果要使得下拉控件只读,需要设置属性hideTrigger】

---重要方法---
GetName:获取name或者hiddenName
GetRawValue:如果是下拉框,则获取下拉框中显示的值,而非value。同理:setRawValue
Reset:单一的一个控件也可以reset。

Change事件可以监控值得更改。
2.2 Textfield
Grow:设置文本输入域的长度是否随着文本的变化而变化,伴随着的2个属性分别为:growMax和growMin,最长的长度和最短的长度。适用于一个文本输入域占一行的布局模式。
SelectOnFocus:如果设置为true,则当此文本域获得焦点的时候,选中已经存在的文本,如图所示:

EmptyText:为空的时候,显示的值
EmptyClass:为空的时候的样式 'x-form-empty-field'
MaskRe:屏蔽的正则表达式
Validator:function【校验函数,返回值为true则通过,没通过返回string】
SelectText:选中文本。
2.3 Triggerfield
Editable:是否可以编辑,如果设置为false,则不接受用户输入,可以实现鼠标点击文本域就出现下拉列表的效果。本来在field中定义了一个叫:readOnly的属性,这就是为什么还要定义此属性的原因。
HideTrigger:隐藏后面的那个图片按钮,这某些只读模式下浏览数据很有用。
OnTriggerClick:如果你想自己定义小图标点击事件,请为按钮添加这个事件并实现自定义需求。
2.4 Numberfield
DecimalPrecision:自动计算精确到小数点后几位,一个很有用的属性
MaxValue,minValue:最大值和最小值
2.5 DisplayField
作为3.0里面新增加的一个控件,主要是用来数据浏览。
HtmlEncode:是否接受html标签。
2.6 Label
Html:接受html标记的字符串。
Text:不接受html标记的字符串。
所以设置值得时候,setText有2个参数,第一个表示值,第二个表示是否接受html标记。
2.7 Datefield
DisabledDates:将一些指定的日期失效(不可选取),指定方式也是灵活多变的,具体方式可以参照API文档,这里写出来,这是告诉大家,有这么一个属性,可以方便的帮你实现一些页面控制。
DisabledDays:指定星期几失效。0-6
MaxValue,minValue:最大的有效日期
ShowToday:是否显示今天,就是下面那个小按钮。
2.8 TimeField
Increment:默认为15
MaxValue,minValue:最大值和最小值
2.9 Checkbox
boxLabel:显示在复选框傍边的文本
checked:是否被选中
handler:函数,有个参数:第一个是checkbox,组件本身;第二个checked,选中状态
scope:函数的执行范围
getValue:获取复选框的状态,为true或者false
setValue:true, 'true', '1', or 'on' 设置为选中,其余的则不选中
2.10 Radio
继承自checkbox。
inputValue:单选框的值,如果设置了name,使用getGroupValue()时,获取的就是这个值。
如果要为一组单选按钮添加事件,则使用如下的方法比较简单:

2.11 CheckboxGroup
继承自field。Xtype:checkboxgroup
Columns:列数,按照几列来分配checkbox【 String/Number/Array】
Items:里面是checkbox的集合
Vertical:是否垂直分布控件

2.12 RadioGroup
继承自checkboxgroup。Xtype:radiogroup
GetValue:获取选中的组件,是一个组件。
SetValue(String/Ext.form.Radio id, Boolean value):为指定的某个组件设置值
2.13 TriggerField
HideTrigger:是否隐藏后面的小按钮
TriggerClass:小按钮的图标 'x-form-trigger'
TriggerConfig:
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}
onTriggerClick:点击小按钮的事件处理
【API通过继承实现了搜索的下拉框】
2.14 Combobox
这个控件可能是使用频率最高的,也是最容易出问题的,这个控件不是传统的文本域的渲染,有继承关系可以看出,这个控件是由一个文本域加一个图片按钮组合而成的。
ForceSelection:强制使显示在文本域中的文本是下拉列表中存在的
MaxHeight:下拉列表的最大高度
Mode:关键属性,必须定义的,分为local和remote,分别代表读取本地数据还是远程数据,如果是远程数据,下拉列表就会显示loadingText.
Shadow:是否显示阴影,如果设置为true,需要多在页面上添加4个div层。
triggerAction:指定如何搜索显示列表数据,query和all
typeAhead:在输入的时候是否把第一匹配项自动选择到文本框中
title:是否为列表添加一个标题
displayField:显示的文本
valueField:提交到后台的值
hiddenValue:初始化的默认值
lazyInit:是否默认不初始化列表(性能优化)
lazyRender:是否延迟渲染,一般在使用编辑控件的时候使用,Ext.Editor
itemSelector:使用tpl的时候,必须使用的属性,默认为:'x-combo-list-item'
listAlign:列表的显示位置
listEmptyText:当列表没有数据的时候显示的文本
store,tpl:重要属性
valueNotFoundText:没有找到相应值的时候,显示的文本,默认为空
view:dataView对象,combox选项是实现的数据视图
lastQuery:String,强制重新查询。


【重要方法】
ClearValue:清楚当前选中的数据
Expand和collapse:展开和收缩列表
DoQuery:对下拉数据列表执行SQL数据查询,和lazyQuery属性相关
GetStore:返回下拉框的数据源
GetValue:获取选中的值  【setValue】
SelectByVlaue:String value, Boolean scrollIntoView ,表示是否滚动到相应的数据
Select:Number index, Boolean scrollIntoView,选中item的索引
事件监听包括:expand,collapse,select,beforesleect,beforequery

热点排行