Extjs 系列实例一

最近在研究extjs，虽然以前写过一次实例，但时间长了，因为工作中用得少，也忘记了不少。最近又重新拾起来，写了几个实例，准备做个小项目，把书本上的电子宠物的UI准备全部用extjs再写过一次。这里把自己写的实例代码写出来，供大家参考。

这个小项目是用extjs+struts2+spring+hibernate写的

页面上要加这些代码：

<link rel="stylesheet" href="extjs/resources/css/ext-all.css" mce_href="extjs/resources/css/ext-all.css" type="text/css"/>
<mce:script type="text/javascript" src="extjs/adapter/ext/ext-base.js" mce_src="extjs/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="extjs/ext-all.js" mce_src="extjs/ext-all.js"></mce:script>
<mce:script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js" mce_src="extjs/locale/ext-lang-zh_CN.js"></mce:script>

先看登录页面，注意里面的验证码的写法，login.js：

/*
* 代码一开始运行
*/
Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "qtip";   //统一指定错误信息提示方式
var loginForm = new Ext.form.FormPanel({
title: "宠物登录",
labelSeparator: ":",			//分隔符
labelWidth: 60,					//标签宽度
bodyStyle: "padding: 5 5 5 25",	//表单边距
frame: true,
buttonAlign: 'center',			//按钮居中
height: 160,
width: 300,
applyTo: "loginForm",
items:
[
new Ext.form.NumberField({
fieldLabel: "宠物号",
id: "petId",
name: "petId",
selectOnFocus: true,	//得到焦点时自动选择文本
allowDecimals: false,		//不许输入小数
allowNegative: false,		//不许输入负数
allowBlank: false,
blankText: "宠物号必须输入",
emptyText: "请输入宠物号"
}),
new Ext.form.TextField({
fieldLabel:"密码",
inputType: "password",
blankText: "密码不能为空",
name:"pwd",
allowBlank: false
}),
{
fieldLabel: "验证码",
height:45,
xtype:"panel",
layout:"column",
items:[{
xtype: "textfield",
id: "vcode",
name: "vcode",
width: 65,
maxLength: 4,
maxLengthText: '验证码位数不对',
selectOnFocus: true,		//得到焦点时自动选择文本
allowBlank: false,
blankText: "验证码不能为空"
},
{
xtype:"panel",
html: "  <img src="vcode.jsp" mce_src="vcode.jsp" onclick=/"this.src='vcode.jsp?t=' + Math.random()/"/>"
}]
}
],
buttons:[
new Ext.Button({
text: "登 录",
handler: login
}),
new Ext.Button({
text: "领养宠物",
handler: function() {
location.href= "pet/adopt.jsp";
}
}),
new Ext.Button({
text: "重 置",
handler: reset
})
]
});

/*
* 重置表单
*/
function reset() {
loginForm.form.reset();
}

/*
* 登录
*/
function login() {
loginForm.form.submit({
clientValidation:true,						//进行客户端验证
waitMsg: "正在登录请稍候...",					//提示信息
waitTitle: "登录中",
url: "login.action",						//请求的地址
method: "post",
success: function(form,action) {			//成功的函数
location.href = "pet/editpet.jsp";
},
failure: function(form,action) {			//失败函数
//action是Ext.form.Action对象
Ext.Msg.show({
title: "信息",
msg: action.result.errors.info,
buttons: Ext.Msg.OK,
icon: Ext.Msg.QUESTION
});
}
});
}
});