首页 > 代码库 > Ext.js入门：常用组件与综合案例（七）
Ext.js入门：常用组件与综合案例（七）
一：datefield简单示例
二：timefield简单示例
三：numberfield简单示例
四：FormPanel提交
datefield简单示例：
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <link href="http://www.mamicode.com/Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="http://www.mamicode.com/Ext/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="http://www.mamicode.com/Ext/ext-all.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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="http://www.mamicode.com/Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="http://www.mamicode.com/Ext/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="http://www.mamicode.com/Ext/ext-all.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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="http://www.mamicode.com/Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="http://www.mamicode.com/Ext/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="http://www.mamicode.com/Ext/ext-all.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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入门：常用组件与综合案例（七）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。