接上一篇,这是领养宠物的页面: Ext.onReady(function () { Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = "qtip"; //定义自定义验证方式,2次密码输入要相同 Ext.apply(Ext.form.VTypes,{ //验证方法 pwdConfirm: function(value,field) { var pwd = Ext.getCmp("pwd").getValue(); return (value == pwd); //相等为真 }, pwdConfirmText: "两次密码输入不一致,请重新输入" }); //定义宠物对象 var pig = { name: "千禧猪", photo: "pig.jpg", strength: 60, cute: 30, love: 100, type: 0 }; var cat = { name: "喵咪", photo: "cat.jpg", strength: 30, cute: 90, love: 70, type: 1 }; var dragon = { name: "哥斯拉", photo: "dragon.jpg", strength: 120, cute: 50, love: 20, type: 2 }; //给后面的下拉列表用 var petTypeStore = new Ext.data.SimpleStore({ fields: ["name","type"], data:[[pig.name,pig.type],[cat.name,cat.type],[dragon.name,dragon.type]] }); var petStrength = new Ext.form.TextField({ labelWidth:40, fieldLabel : "力量", id : "petStrength", name : "petStrength", itemCls: "float-left", clearCls: "allow-float", width : 40, readOnly : true }); var petCute = new Ext.form.TextField({ labelWidth:40, fieldLabel : "智慧", id : "petCute", name : "petCute", itemCls: "float-left", clearCls: "allow-float", width : 40, readOnly : true }); var petLove = new Ext.form.TextField({ labelWidth:40, fieldLabel : "爱心", id : "petLove", name : "petLove", width : 40, name : "petStrength", itemCls: "float-left", clearCls: "allow-float", readOnly : true }); //combox var petTypeComboBox = new Ext.form.ComboBox({ //宠物类型 emptyText: "-请选择-", width: 125, fieldLabel: "类型", editable: false, //不可编辑 id: "petType", name: "petType", store: petTypeStore, triggerAction: "all", //单击触发按钮显示全部数据 displayField: "name", mode: "local", valueField: "type" }); //添加事件 petTypeComboBox.on("select",function(comboBox) { var photo = "images/"; //得到显示值 switch (comboBox.getRawValue()) { case pig.name: petStrength.setValue(pig.strength); petCute.setValue(pig.cute); petLove.setValue(pig.love); photo = photo + pig.photo; break; case cat.name: petStrength.setValue(cat.strength); petCute.setValue(cat.cute); petLove.setValue(cat.love); photo = photo + cat.photo; break; case dragon.name: petStrength.setValue(dragon.strength); petCute.setValue(dragon.cute); petLove.setValue(dragon.love); photo = photo + dragon.photo; break; } Ext.getDom("petPhoto").src = photo; }); //面板 var adoptForm = new Ext.form.FormPanel({ title: "我的宠物信息", bodyStyle: "padding: 15 15 15 15", //表单边距 frame: true, height: 390, labelWidth:55, width: 360, labelAlign: "right", //标签对齐方式 applyTo: "adoptForm", items: [ new Ext.form.TextField({ fieldLabel: "宠物名", emptyText: "输入宠物名", blankText: "请填写宠物的名称", id: "petName", selectOnFocus: true, //得到焦点时自动选择文本 allowBlank: false, name: "petName" }), new Ext.form.TextField({ fieldLabel:"密 码", blankText: "密码不能为空", id: "pwd", inputType: "password", name:"pwd", allowBlank: false }), new Ext.form.TextField({ fieldLabel:"确认密码", blankText: "确认密码不能为空", id:"confirmPwd", inputType: "password", name:"confirmPwd", allowBlank: false, vtype: "pwdConfirm" //自定义验证 }), petTypeComboBox, { layout : 'column', // 列布局 items : [{ layout : 'form', items : [new Ext.form.Radio({ checked: true, fieldLabel : '性别', boxLabel : '雄', width: 40, name : 'petSex' })] }, { items : [new Ext.form.Radio({ boxLabel : '雌', name : 'petSex', width: 40 })] }, { items : [new Ext.form.Radio({ boxLabel : '幼', name : 'petSex', width: 40 })] }] }, petStrength, petCute, petLove, new Ext.form.TextArea({ clearCls: "stop-float", fieldLabel : "简介", id : "introduce", name : "introduce", width: 240, height: 70 }), new Ext.form.TextField({ fieldLabel:"我的姓名", emptyText: "输入主人的姓名", blankText: "宠物主人姓名必须输入", id:"owner", name:"owner", allowBlank: false }), new Ext.form.TextField({ fieldLabel:"我的邮箱", emptyText: "请输入邮箱地址", blankText: "邮箱地址不能为空", id:"email", name:"email", allowBlank: false, vtype: "email" }) ], buttons:[ new Ext.Button({ text: "领 养", handler: function() { adoptForm.form.submit({ clientValidation:true, // 进行客户端验证 waitMsg: "正在领养...", // 提示信息 waitTitle: "领养中", url: "adopt.action", //请求的地址 method: "post", success: function(form,action) { //成功的函数 location.href = "/epet/login.jsp"; }, failure: function(form,action) { //失败函数 Ext.Msg.show({ title: "信息", msg: "宠物领养失败,请把数据填完整。", buttons: Ext.Msg.OK, icon: Ext.Msg.QUESTION }); } }); } }), new Ext.Button({ text: "登 录", handler: function() { location.assign("/epet/login.jsp"); } }), new Ext.Button({ text: "首 页", handler: function() { location.assign("/epet/index.jsp"); } }) ] }); });