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" οnclick=/"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 }); } }); } });