Ext.js入门：常用组件与综合案例（七）
一：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/>");
附一张错误的解决方案：
配置中加上这句话：
