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:
'
radio1
'
}
),
new
Ext.form.Radio(
{
labelSeparator:
''
,
name:
'
radio
'
,
checked:
true
,
boxLabel:
'
radio2
'
}
)
]
}
),
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>helloworld</h1>
"
);
htmleditor.syncValue();
繼承自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:
'
radio1
'
}
),
new
Ext.form.Radio(
{
labelSeparator:
''
,
name:
'
radio
'
,
checked:
true
,
boxLabel:
'
radio2
'
}
)
]
}
),
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>helloworld</h1>
"
);
htmleditor.syncValue();
Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
