一：datefield簡單示例
二：timefield簡單示例
三：numberfield簡單示例
四：FormPanel提交
datefield簡單示例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var myform = new Ext.FormPanel({
frame: true,
width: 200,
layout: "form",
title: "請選擇出生日期",
labelWidth: 60,
labelAlgin: "right",
renderTo: Ext.getBody(),
items: [
{
xtype: "datefield",
fieldLabel: "出生日期",
anchor: "95%"
},
{
xtype:"timefield",
fieldLabel:"出生時間",
anchor:"95%"
},
{
xtype: "numberfield",
fieldLabel: "輸入數字",
anchor: "95%"
}
]
});
});
</script>
</head>
<body>
</body>
</html>
timefield簡單示例
把上面的例子中datefield改為timefield,效果圖：
把上面的例子中datefield改為timefield,效果圖：
numberfield簡單示例：
把上面的datefield改為numberfield，就只能輸入數字了
把上面的datefield改為numberfield，就只能輸入數字了
四：FormPanel提交
示例formpanel如何把數據傳給其他頁面：
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
var mysubmit = function() {
myform.form.submit();
};
var myreset = function() {
myform.form.reset();
};
var myform = new Ext.form.FormPanel({
title: "添加用戶",
width: 300,
frame: true,
layout: "form",
labelAlign: "right",
labelWidth: 70,
renderTo: Ext.getBody(),
monitorValid:true,
submit: function() {
this.getEl().dom.action = "GetForm.aspx";
this.getEl().dom.method = "POST",
this.getEl().dom.submit();
},
items: [
{
xtype: "textfield",
fieldLabel: "用戶名",
id: "username",
name: "username",
allowBlank: false,
blankText: "用戶名不允許為空!",
anchor: "90%"
}, //first
{
xtype: "textfield",
fieldLabel: "昵稱",
id: "smallname",
name: "smallname",
anchor: "90%"
}, //second
{
xtype: "datefield",
fieldLabel: "注冊日期",
id: "regdate",
name: "regdate",
anchor: "90%"
} //third
],
buttonAlign: "center",
buttons: [{ text: "確定",formBind:true, handler: mysubmit }, { text: "重置", handler: myreset}]
});
});
</script>
</head>
<body>
</body>
</html>
后台代碼：
Response.Write(Request["username"].ToString());
Response.Write("<br/>");
Response.Write(Request["smallname"].ToString());
Response.Write("<br/>");
Response.Write(Request["regdate"].ToString());
2.為按鈕添加觸發相應的提交（取消）事件（這樣就不是默認的ajax提交）：
buttons:[{text:"確定",handler:login,formBind:true},{text:"取消",handler:reset}]
});
function login(){
form.form.submit();//提交
}
function reset(){
form.form.reset();//取消
}
3.如果你想綁定驗證，在form表單添加參數
monitorValid:true,然后在按鈕配置參數中添加formBind：true，如
buttons:[{text:"確定",handler:login,formBind:true},{text:"取消",handler:reset}]
則只有所有的填寫字段都滿足條件時，"確定"方可提交！
接受頁面GetForm.aspx的cs代碼為：
protected void Page_Load(object sender, EventArgs e)
{
string UserName = Request.Form["UserName"];
string SmallName = Request.Form["SmallName"];
string RegDate = Request.Form["RegDate"];
Response.Write(UserName + "<br/>" + SmallName + "<br/>" + RegDate);
}
四：綜合案例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
var submitform = function() {
myform.form.submit();
};
var resetform = function() {
myform.form.reset();
}
var myform = new Ext.form.FormPanel({
title: "添加個人信息",
frame: true,
width: 450,
layout: "form",
labelWidth: 55,
labelAlign: "right",
renderTo: Ext.getBody(),
monitorValid: true,
submit: function() {
this.getEl().dom.action = "handlerInfo.aspx";
this.getEl().dom.method = "POST";
this.getEl().dom.submit();
},
items:
[ //items start
{
xtype: "panel",
layout: "column",
fieldLabel: "用戶名",
items:
[
{
columnWidth: .5,
xtype: "textfield",
allowBlank: false,
blankText: "用戶名不允許為空!",
name: "UserName",
anchor: "90%"
},
{
columnWidth: .25,
layout: "form",
lableWidth: 30,
labelAlign: "right",
items: [
{ xtype: "radio",
fieldLabel: "性別",
boxLabel: "男",
name: "Sex",
checked: true,
inputValue: "boy",
anchor: "99%"
}
]
},
{
columnWidth: .25,
layout: "form",
labelWidth: 1,
items: [{
xtype: "radio",
boxLabel: "女",
name: "Sex",
inputValue: "girl",
anchor: "95%"
}]
}
]
},
{
xtype: "panel",
layout: "column",
fieldLabel: "出生日期",
items: [
{
columnWidth: .5,
xtype: "datefield",
name: "BirthDate",
anchor: "90%"
},
{
columnWidth: .5,
layout: "form",
labelWidth: 40,
items: [
{ xtype: "combo",
name: "Degree",
fieldLabel: "學位",
store: ["小學", "初中", "高中", "大學"],
emptyText: "請選擇您的學歷...",
anchor: "90%"
}
]
}
]
},
{
xtype: "panel",
layout: "column",
fieldLabel: "使用框架",
items: [
{
columnWidth: .2,
xtype: "checkbox",
boxLabel: "Spring.net",
name: "SpringNet",
inputValue: "spring"
},
{
columnWidth: .25,
layout: "form",
labelWidth: 1,
items: [
{
xtype: "checkbox",
boxLabel: "Nhibernate",
name: "NHibernate",
inputValue: "nhibernate",
anchor: "95%"
}
]
},
{
columnWidth: .55,
layout: "form",
labelWidth: 1,
items: [
{
xtype: "checkbox",
boxLabel: "Linq",
name: "Linq",
inputValue: "linq",
anchor: "95%"
}
]
}
]
},
{
xtype: "textfield",
fieldLabel: "Email",
name: "Email",
vtype: "email",
vtypeText: "請輸入合法的Email",
anchor: "60%"
},
{
xtype: "textarea",
fieldLabel: "個性簽名",
name: "OneWord",
height: 60,
anchor: "95%"
},
{
xtype: "htmleditor",
fieldLabel: "想說的話",
name: "WantToSay",
anchor: "95%",
enableAlignments: false,
enableLists: false,
height: 200
}
], //items end
buttons: [{ text: "確定", handler: submitform, formBind: true }, { text: "取消", handler: resetform}]
});
});
</script>
</head>
<body>
</body>
</html>
后端代碼：
string UserName = Request.Form["UserName"];
Response.Write("UserName:"+UserName+"<br/>");
string Sex = Request.Form["Sex"];
Response.Write("Sex:" + Sex + "<br/>");
string BirthDate = Request.Form["BirthDate"];
Response.Write("BirthDate:" + BirthDate + "<br/>");
string Degree = Request.Form["Degree"];
Response.Write("Degree:" + Degree + "<br/>");
string SpringNet = Request.Form["SpringNet"];
Response.Write("SpringNet:" + SpringNet + "<br/>");
string NHibernate = Request.Form["NHibernate"];
Response.Write("NHibernate:" + NHibernate + "<br/>");
string Linq = Request.Form["Linq"];
Response.Write("Linq:" + Linq + "<br/>");
string Email = Request.Form["Email"];
Response.Write("Email:" + Email + "<br/>");
string OneWord = Request.Form["OneWord"];
Response.Write("OneWord:" + OneWord + "<br/>");
string WantToSay = Request.Form["WantToSay"];
Response.Write("WantToSay:" + WantToSay + "<br/>");
附一張錯誤的解決方案：
配置中加上這句話：
