NumberField控件
整數，小數，數字限制，值範圍限制
new Ext.form.NumberField({
fieldLabel:'整數',
allowDecimals : false,//不允許輸入小數
allowNegative : false,//不允許輸入負數
nanText :'請輸入有效的整數',//無效數字提示
}),
new Ext.form.NumberField({
fieldLabel:'小數',
decimalPrecision : 2,//精確到小數點後兩位
allowDecimals : true,//允許輸入小數
nanText :'請輸入有效的小數',//無效數字提示
allowNegative :false//允許輸入負數
}),
new Ext.form.NumberField({
fieldLabel:'數字限制',
baseChars :'12345'//輸入數字範圍
}),
new Ext.form.NumberField({
fieldLabel:'數值限制',
maxValue : 100,//最大值
minValue : 50//最小值
})
TextArea 控件
Radio或Checkbox用法 box類
new Ext.form.Radio({
name : 'sex',//名字相同的單選框會作爲一組
fieldLabel:'性別',
boxLabel : '男'
}),
new Ext.form.Radio({
name : 'sex',//名字相同的單選框會作爲一組
fieldLabel:'性別',
boxLabel : '女'
}),
在一排
new Ext.form.Radio({
name : 'sex',//名字相同的單選框會作爲一組
itemCls:'float-left',//向左浮動
clearCls:'allow-float',//允許浮動
fieldLabel:'性別',
boxLabel : '男'
}),
new Ext.form.Radio({
name : 'sex',//名字相同的單選框會作爲一組
clearCls:'stop-float',//阻止浮動
hideLabel:true, //橫排後隱藏標籤
boxLabel : '女'
}),
new Ext.form.Checkbox({
name : 'swim',
fieldLabel:'愛好',
boxLabel : '游泳'
}),
在一排
new Ext.form.Checkbox({
name : 'swim',
itemCls:'float-left',//向左浮動
clearCls:'allow-float',//允許浮動
fieldLabel:'愛好',
boxLabel : '游泳'
}),
new Ext.form.Checkbox({
name : 'walk',
clearCls:'stop-float',//允許浮動
hideLabel:true, //橫排後隱藏標籤
boxLabel : '散步'
})
TriggerField （很像一個默認combobox）
new Ext.form.TriggerField({
id:'memo',
fieldLabel:'觸發字段',
hideTrigger : false,
onTriggerClick : function(e){
}
})
combobox下拉菜單控件
1.本地模式
本地數據源：
數據源的定義：
var store = new Ext.data.SimpleStore({//定義組合框中顯示的數據源
fields: ['province', 'post'],
data : [['北京','100000'],['通縣','101100'],['昌平','102200'],
['大興','102600'],['密雲','101500'],['延慶','102100'],
['順義','101300'],['懷柔','101400']]
});
new Ext.form.ComboBox({
id:'post',
fieldLabel:'郵政編碼',
triggerAction: 'all',//單擊觸發按鈕顯示全部數據
store : store,//設置數據源
displayField:'province',//定義要顯示的字段
valueField:'post',//定義值字段
mode: 'local',//本地模式
forceSelection : true,//要求輸入值必須在列表中存在
resizable : true,//允許改變下拉列表的大小
typeAhead : true,//允許自動選擇匹配的剩餘部分文本
value:'102600',//默認選擇大興
handleHeight : 10//下拉列表中拖動手柄的高度
})
2.遠程模式
遠程數據源
var store = new Ext.data.SimpleStore({
proxy : new Ext.data.HttpProxy({//讀取遠程數據的代理
url : 'bookSearchServer.jsp'//遠程地址
}),
fields : ['bookName']
});
new Ext.form.ComboBox({
id:'book',
allQuery:'allbook',//查詢全部信息的查詢字符串
loadingText : '正在加載書籍信息',//加載數據時顯示的提示信息
minChars : 3,//下拉列表框自動選擇前用戶需要輸入的最小字符數量
queryDelay : 300,//查詢延遲時間
queryParam : 'searchbook',//查詢的名字
fieldLabel:'書籍列表',
triggerAction: 'all',//單擊觸發按鈕顯示全部數據
store : store,//設置數據源
displayField:'bookName',//定義要顯示的字段
mode: 'remote'//遠程模式,
})
遠程json數據源
var store = new Ext.data.JsonStore({
url : 'bookSearchServerPage.jsp',//遠程地址
totalProperty : 'totalNum',
root : 'books',
fields : ['bookName']
});
分頁式組合框
new Ext.form.ComboBox({
id:'book',
fieldLabel:'書籍列表',
store : store,//設置數據源
allQuery:'allbook',//查詢全部信息的查詢字符串
triggerAction: 'all',//單擊觸發按鈕顯示全部數據
listWidth : 230,//指定列表寬度
editable : false,//禁止編輯
loadingText : '正在加載書籍信息',//加載數據時顯示的提示信息
displayField:'bookName',//定義要顯示的字段
mode: 'remote',//遠程模式
pageSize : 3//分頁大小
})
轉select 爲 combobox
new Ext.form.ComboBox({
name:'level',
fieldLabel:'職稱等級',
lazyRender : true,
triggerAction: 'all',//單擊觸發按鈕顯示全部數據
transform : 'levelName'
})
<SELECT ID="levelName">
<OPTION VALUE="1">高級工程師</OPTION>
<OPTION VALUE="2">中級工程師</OPTION>
<OPTION VALUE="3" SELECTED>初級工程師</OPTION>
<OPTION VALUE="4">高級經濟師</OPTION>
<OPTION VALUE="5">中級經濟師</OPTION>
<OPTION VALUE="6">初級經濟師</OPTION>
</SELECT>
TimeField 控件
new Ext.form.TimeField({
id:'time',
width : 150,
maxValue : '18:00',//最大時間
maxText : '所選時間應小於{0}',//大於最大時間的提示信息
minValue : '10:00',//最小時間
minText : '所選時間應大於{0}',//小於最小時間的提示信息
maxHeight : 70,//下拉列表的最大高度
increment : 60,//時間間隔爲60分鐘
format : 'G時i分s秒',//G標示爲24時計時法
invalidText :'時間格式無效',
fieldLabel:'時間選擇框'
})
DateField 控件
new Ext.form.DateField({
id:'date',
format:'Y年m月d日',//顯示日期的格式
maxValue :'12/31/2008',//允許選擇的最大日期
minValue :'01/01/2008',//允許選擇的最小日期
disabledDates : ["2008年03月12日"],//禁止選擇2008年03月12日
disabledDatesText :'禁止選擇該日期',
disabledDays : [0,6],//禁止選擇星期日和星期六
disabledDaysText : '禁止選擇該日期',
width : 150,
fieldLabel:'日期選擇框' ,
//value: '01/01/2010' //設置默認值
value: new Date //設置默認值
})
Hidden 控件
new Ext.form.Hidden({//隱藏域
name:'age',
width : 150,
fieldLabel:'年齡'
}),
FieldSet控件相當於groupBox
new Ext.form.FieldSet({
title:'產品信息',
labelSeparator :'：',//分隔符
items:[
new Ext.form.TextField({
fieldLabel:'產地'
}),
new Ext.form.NumberField({
fieldLabel:'售價'
})
]
}),
TextField控件
vtype 輸入格式屬性應用
new Ext.form.TextField({
fieldLabel:'電子郵件',
width : 170,
vtype:'email'
}),
new Ext.form.TextField({
fieldLabel:'網址',
width : 170,
vtype:'url'
}),
new Ext.form.TextField({
fieldLabel:'字母',
width : 170,
vtype:'alpha'
}),
new Ext.form.TextField({
fieldLabel:'字母和數字',
width : 170,
vtype:'alphanum'
})
