ExtJs最常用表單元件ComboBox、time、date
阿新 • • 發佈：2018-11-02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用者登入介面</title>
<script typt="text/javascript" src="../ext/ext-all.js"></script>
<link rel="stylesheet" href="../ext/resources/css/ext-all.css"/>
</head>
<body>
<div id="register"></div>
<script typt="text/jjavascript">
Ext.onReady(function () {
//註冊一個數據模型
Ext.regModel("jiGuanModel", {
fields: [{
name: 'jiGuanMingZi'
}, {
name: 'jiGuanZhi'
}]
});
/*定義Combo的資料原*/
var jiGuanStore = Ext.create("Ext.data.Store", {
model: 'jiGuanModel',
data: [{
jiGuanMingZi: '雲南省',
jiGuanZhi: '1'
}, {
jiGuanMingZi: '甘肅省',
jiGuanZhi: '2'
}, {
jiGuanMingZi: '江蘇省',
jiGuanZhi: '3'
}, {
jiGuanMingZi: '江西省',
jiGuanZhi: '4'
}, {
jiGuanMingZi: '湖北省',
jiGuanZhi: '5'
}]
});
var login = new Ext.form.FormPanel({
title: '使用者註冊',
id: 'userLogin',
renderTo: 'register',
width: 500,
height: 500,
items: [{
xtype: 'textfield',
fieldLabel: '使用者名稱',
allowBlank: false, /*設定不能為空*/
blankText: '使用者名稱不能為空',
emptyText: '請輸入使用者名稱',
name: 'userName',
msgTarget: 'side', /*錯誤提示，下方提示under*/
regex: /^\d{3,10}$/, /*正則表示式,固定的數字，必須3到10位*/
regexText: '使用者名稱長度必須是3-10位的數字', /*正則表示式之後提示*/
id: 'userName'
}, {
xtype: 'textfield',
fieldLabel: '密碼',
inputType: 'password', /*密碼黑色顯示*/
name: 'userPass',
id: 'userPass'
}, new Ext.form.field.Number({
fieldLabel: '年齡',
step: 3, /*步長*/
hideTrigger: true, /*將後面的上下鍵隱藏*/
allowDecimals: false, /*不用許出現小數點*/
maxValue: 120,
maxText: '年齡不能超過120',
minValue: 0,
minText: '年齡不能小於0'
}), {
xtype: 'numberfield', /*型別*/
fieldLabel: '折扣'/*小數點後保留兩位小數*/
}, {
xtype: 'radio',
boxLabel: '男',
name: 'sex',
inputValue: 'man'
}, {
xtype: 'radio',
boxLabel: '女',
name: 'sex',
inputValue: 'woman',
handler: function (obj) {/*選擇事件*/
/* alert(obj.inputValue);*/
}
}, {
xtype: 'checkboxfield',
boxLabel: '足球'
}, {
xtype: 'checkboxfield',
boxLabel: '羽毛球'
}, {
xtype: 'checkboxfield',
boxLabel: '兵乓球'
}, {
xtype: 'radiogroup',
fieldLabel: '性別',
columns: 2, /*設定列數*/
items: [{
boxLabel: '男',
name: 'sex'
}, {
boxLabel: '女',
name: 'sex'
}]
}, {
xtype: 'checkboxgroup',
fieldLabel: '愛好',
columns: 3,
items: [{
boxLabel: '籃球'
}, {
boxLabel: '足球'
}, {
boxLabel: '橄欖球'
}]
}, {
xtype: 'combo',
id: 'jiGuan',
fieldLabel:'籍貫',
store: jiGuanStore, /*資料來源*/
queryMode: 'local',
ariggerAction: 'query',
triggerAction:'all',
displayField: 'jiGuanMingZi',
valueField: 'jiGuanZhi'
},{
xtype:'timefield',
id:'loginTime',
fieldLabel:'登陸時間',
maxValue:'19:00',
maxText:'對不起，登陸時間不能晚於19點'
},{
xtype:'datefield',
id:'loginDate',
fieldLabel:'登陸日期',
/*
readOnly:true,不希望使用者輸入
*/
format:'Y-m-d'
}],
buttons: [{
text: '登陸',
handler:function(){
/*單擊事件*/
alert(Ext.getCmp("jiGuan").getValue());
}
},
{
text: '關閉'
}]
});
});
</script>
</body>
</html>
