一、效果圖
先用美圖勾引那些駐足觀望之人：
二、代碼講解
注意代碼中的EXT js引入路徑， 需要根據你的實際情況進行引入，否者可能出現錯誤
本文參考：http://www.cnblogs.com/over140/archive/2009/09/06/1561257.html
先用美圖勾引那些駐足觀望之人：
二、代碼講解
注意代碼中的EXT js引入路徑， 需要根據你的實際情況進行引入，否者可能出現錯誤
<html>
<head>
<title>系統登錄</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<style>
</style>
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var form1 = new Ext.FormPanel({
layout : 'form',
collapsible : true,
autoHeight : true,
frame : true,
renderTo : Ext.getBody(),
title : '<center style="curor:hand" onclick="window.location.reload();">表單控件</center>',
style : 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
//設置標簽對齊方式
labelAlign : 'right',
//設置標簽寬
labelWidth : 170,
//設置按鈕的對齊方式
buttonAlign : 'center',
//默認元素屬性設置
defaults : {
width : 180
},
items : [{
fieldLabel : '文本框控件',
name : 'TextBox',
xtype : 'textfield'
//,readOnly : true //只讀
//,emptyText :'請輸入數據' //為空時顯示的文本，注意不是value
}, {
fieldLabel : '只允許輸入數字',
name : 'TextBoxNumber',
xtype : 'numberfield'
//,allowDecimals: false // 允許小數點
//,allowNegative: false, // 允許負數
//,maxValue:1000 //最大值
//,minValue:0 //最小值
}, {
fieldLabel : '下拉框控件',
name : 'DropDownList',
xtype : 'combo',
//mode : 'local',
displayField : "Name",
//設置為選項的value的字段
valueField : "Id",
//是否可以輸入，還是只能選擇下拉框中的選項
editable : false,
typeAhead : true,
//必須選擇一項
//forceSelection: true,
//輸入部分選項內容匹配的時候顯示所有的選項
triggerAction : 'all',
//selectOnFocus:true,
//數據
store : new Ext.data.SimpleStore({
fields : ['Id', 'Name'],
data : [[1, '男'], [0, '女']]
})
}, {
fieldLabel : '日歷控件',
xtype : 'datefield',
name : 'DateControl',
format : "Y-m-d",
editable : false
//, 默認當前日期
//value:new Date().dateFormat('Y-m-d')
}, {
fieldLabel : '單選控件',
xtype : 'radiogroup',
name : 'Radios',
items : [{
name : 'RadioItems',
boxLabel : '選我',
inputValue : '1',
checked : true
}, {
name : 'RadioItems',
boxLabel : '選我吧',
inputValue : '0'
}]
}, {
fieldLabel : '復選控件',
xtype : 'checkboxgroup',
name : 'Checkboxs'
//columns屬性表示用2行來顯示數據
,
columns : 2,
items : [{
name : 'CheckboxItems',
boxLabel : '香蕉',
inputValue : 'A'
}, {
name : 'CheckboxItems',
boxLabel : '蘋果',
inputValue : 'B'
}, {
name : 'CheckboxItems',
boxLabel : '橘子',
inputValue : 'C'
}, {
name : 'CheckboxItems',
boxLabel : '桃子',
inputValue : 'D'
}]
}, {
fieldLabel : '文本域控件',
xtype : 'textarea',
value : '可以輸好多字！',
height : 50
}, {
fieldLabel : '時間控件',
xtype : 'timefield'
//格式化輸出 默認為 "g:i A"
//"g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"
,
format : 'H:i'
//時間間隔(分鐘)
,
increment : 60
}, {
fieldLabel : '標簽頁',
xtype : 'fieldset',
title : '標簽頁',
autoHeight : true,
items : [{
xtype : 'panel',
title : '標簽頁中的面板',
frame : true,
height : 50
}]
}, {
fieldLabel : '在線編輯器',
xtype : 'htmleditor',
width : 260,
height : 100
//以下為默認選項，其他請參照源代碼
//,enableColors: false
//,enableFormat : true
//,enableFontSize : true
//,enableAlignments : true
//,enableLists : true
//,enableSourceEdit : true
//,enableLinks : true
//,enableFont : true
}],
buttons : [{
text : "保 存",
handler : function() {
MsgInfo('保存');
}
}, {
text : "取 消",
handler : function() {
form1.form.reset();
}
}]
});
function MsgInfo(str_msg) {
Ext.MessageBox.show({
title : '提示',
msg : str_msg,
width : 400,
icon : Ext.MessageBox.INFO,
buttons : Ext.MessageBox.OK
});
}
});
</script>
</form>
</body>
</html>
本文參考：http://www.cnblogs.com/over140/archive/2009/09/06/1561257.html
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
