Ext.form表单中各种属性应用详解！

http://blog.sina.com.cn/s/blog_4934a04a0100a5yn.html

Ext.form.NumberField

继承自Ext.form.TextField,因为Ext.form.TextField虽然强大,但写起来的确还是有点麻烦,后面的类都继承自Ext.form.TextField,没有自定义的方法,属性和事件

config定义为{

allowDecimals : Boolean
//true

allowNegative : Boolean
//true

baseChars : String
//'0123456789'

decimalPrecision : Number
//精度,默认值2

decimalSeparator : String
//小数分隔符

fieldClass : String
//默认样式为x-form-field x-form-num-field

maxText :
String

maxValue : Number
//默认Number.MAX_VALUE

minText :
String

minValue : Number
//默认Number.NEGATIVE_INFINITY

nanText :
String //NaN时显示?

}

Ext.form.TextArea

config{

autoCreate :
String/Object //{tag: "textarea", style:
"width:100px;height:60px;", autocomplete: "off"}

growMax :
Number //1000

growMin :
Number //60

preventScrollbars :
Boolean //如果为真等于设置overflow: hidden,默认为false

}

Ext.form.TriggerField

这个类只要text旁边加了个下拉按钮,要自己实现onTriggerClick

config{

autoCreate : String/Object, //{tag: "input", type: "text",
size: "16", autocomplete: "off"}

hideTrigger :
Boolean
//隐藏trigger,就是右边的那个下拉选择框

triggerClass : String

}

事件

onTriggerClick( EventObject e ) : void

Ext.form.DateField

继承自TriggerField,用于日期选择

config{

altFormats :
String
//转换用户输入到日期时的格式,默认'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d'

autoCreate
: String/Object //{tag: "input", type: "text", size: "10",
autocomplete: "off"}

disabledDates :
Array //禁止选择的日期:例
["^03","04/../2006","09/16/2003"],不让选3月,2006年4月,2003年9月16

disabledDatesText : String //不让选总得给个理由吧

disabledDays : Array
//不让选星期几,例[0,6],不让选周六,周日

disabledDaysText :
String //周日要休息,这就是理由

format :
String //显示时的格式

invalidText :
String //验证非法时的提示

maxText :
String

maxValue : Date/String

minText : String

minValue :
Date/String

triggerClass : String

}

方法,除了构造,多了两个顾名思义的方法

DateField( Object config )

getValue() :
Date

setValue( String/Date date ) : void

Ext.form.ComboBox

config{

allQuery :
String //''

autoCreate : Boolean/Object //{tag: "input", type: "text",
size: "24", autocomplete: "off"}

displayField :
String //显示字段

editable :
Boolean
//true当然就是combobox了,如果不可编辑就是一个select了

forceSelection :
Boolean

handleHeight : Number
//如果resiable为真时,设置

hiddenName :
String

lazyInit : Boolean
//除非得到焦点才开始初始化列表,默认为真

lazyRender :
Boolean //除非请求,才开始输出,默认为假

listAlign :
String
//对齐方式,参见Ext.Element.alignTo,默认为'tl-bl'

listClass :
String

listWidth : Number

loadingText : String //仅当mode =
'remote'时调用数据时显示的文本

maxHeight :
Number //300

minChars : Number
//最少输入多少个字开始响应,远程时默认为4,本地为0,如果不可编辑则此值无效

minListWidth :
Number

mode : String
//可选值local/remote之一,从本地还是远程取数据

pageSize :
Number //在远程模式下,如果此值大于0会在底部显示一个翻页工具条

queryDelay : Number //查询延时,远程默认为500,本地10

queryParam : String //查询参数,默认为query

resizable : Boolean

selectOnFocus :
Boolean

selectedClass : String

shadow : Boolean/String //True或"sides"为默认风格, "frame" for 4-way
shadow, and "drop" for bottom-right

store :
Ext.data.Store

title : String

transform : Mixed
//对应一个select元素,可以将select转为combobox对象

triggerAction :
String //点击按钮时的动作.默认为query

triggerClass
: String

typeAhead :
Boolean //false

typeAheadDelay : Number //250

valueField
: String

valueNotFoundText : String
//值不存在时的提示信息

}

属性

view : Ext.DataView

方法

ComboBox( Object config )

构造

clearValue() : void

清除所有文本/值对

collapse() : void

expand() : void

收起/展开下拉列表

doQuery( String query, Boolean forceAll ) : void

执行查询

getValue() : String

选择当前字段的值

isExpanded() : void

下拉列表是展开的?

select( Number index, Boolean scrollIntoView ) : void

选中第index列表项

selectByValue( String value, Boolean scrollIntoView ) :
Boolean

选中值为value的列表项

setEditable( Boolean value ) : void

设editable属性为value

setValue( String value ) : void

设置当前值为

事件

beforequery : ( Object queryEvent )

beforeselect : (
Ext.form.ComboBox combo, Ext.data.Record record, Number index )

collapse : (
Ext.form.ComboBox combo )

expand : ( Ext.form.ComboBox combo )

select : (
Ext.form.ComboBox combo, Ext.data.Record record, Number index )

Ext.form.TimeField

继承自combobox,用于选择时间

config{

altFormats : String //

format :
String

increment : Number
//时间增长间隔,默认15

invalidText : String

maxText : String

maxValue :
Date/String

minText : String

minValue : Date/String

}

总的来说Ext.form对input type='text' select
这样的输入标签都有对应的类,并对有些标签做了简单的扩展,当然很重要的一点,漂亮多了,vtype属性也方便了处理,建议有兴趣的同胞对
Ext.form.VTypes和Ext.form.HtmlEditor做一些扩展

form中还有两个类,比如下例中的FormPanel和FieldSet,

都继承自panel,所以会放在panel中解释

综合示例

Ext.QuickTips.init();

var arr=[ [1,
'本.拉登'], [2, '笨.拉登'],[3, '笨.拉灯'] ];

var reader = new
Ext.data.ArrayReader(

...{id: 0},

[

...{name:
'value'},

...{name: 'key'}

]);

var store=new
Ext.data.Store(...{

reader:reader

});

store.loadData(arr);

var htmleditor=new
Ext.form.HtmlEditor(...{

fieldLabel:'htmleditor',

width:450,

fontFamilies:['宋体','隶书'],

name:'editor',

id:'editor'

});

var form = new Ext.FormPanel(...{

labelWidth: 75,

url:'post.php'
,

frame:true,

width:
800,

defaultType:
'textfield',

items:
[

new
Ext.form.Checkbox(...{
//checkbox

fieldLabel:'checkbox',

name:'cb',

checked:true,

boxLabel:'checkbox'

}),

new
Ext.form.FieldSet(...{
//radio

border:false,

title:'radio',

items:[

new
Ext.form.Radio(...{

labelSeparator:'',

name:'radio',

checked:true,

boxLabel:'radio
1'

}),

new
Ext.form.Radio(...{

labelSeparator:'',

name:'radio',

checked:true,

boxLabel:'radio
2'

})

]

}),

new
Ext.form.Hidden(...{
//hidden

name:'hidden'

}),

htmleditor,

new Ext.form.TextField(...{
//text

fieldLabel:'text',

name:'text',

grow:true,

allowBlank:false,

blankText :
"这个字段最好不要为空",

maskRe:/[a-zA-z]/gi

}),

new
Ext.form.NumberField(...{
//NumberField

allowNegative:true,

fieldLabel:'number',

name:'number'

}),

new Ext.form.TextArea(...{
//TextArea

fieldLabel:'textarea',

name:'textarea'

}),

new
Ext.form.TriggerField(...{
//TriggerField

fieldLabel:'TriggerField',

name:'TriggerField'

}),

new
Ext.form.ComboBox(...{
//select

fieldLabel:'select',

editable:false,

triggerAction:
'all',

valueField:'value',

displayField:'key',

mode:
'local',

store:store

}),

new
Ext.form.ComboBox(...{
//combobox

fieldLabel:'ComboBox',

displayField:'key',

mode:
'local',

store:store

}),

new
Ext.form.DateField(...{
//DateField

fieldLabel:'DateField',

format:'Y-m-d',

disabledDays:[0,6]

}),

new
Ext.form.TimeField(...{//TimeField

fieldLabel:'TimeField',

mode:
'local',

increment:60

})

]

});

form.render(document.body);

htmleditor.setRawValue("<h1>hello
world</h1>");

htmleditor.syncValue();