標籤：
一：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簡單樣本
<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/>");
附一張錯誤的解決方案：
配置中加上這句話：
Ext.js入門：常用組件與綜合案例（七）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
