编辑宠物的页面 这是JSP页面的代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <base href="<%=basePath%>"> <title>编辑宠物</title> <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> <mce:script type="text/javascript" src="script/editpet.js" mce_src="script/editpet.js"></mce:script> <mce:style type="text/css" media="all"><!-- .allow_float {clear: none!important;} /*允许该元素浮动*/ .stop-float {clear: both!important;} /*阻止该元素浮动*/ .float-left {float:left;} /*浮动到左边*/ --></mce:style><style type="text/css" media="all" mce_bogus="1"> .allow_float {clear: none!important;} /*允许该元素浮动*/ .stop-float {clear: both!important;} /*阻止该元素浮动*/ .float-left {float:left;} /*浮动到左边*/ </style> </head> <body> <div id="editForm" style="height:1024px; width:768px; margin:0 auto;"></div> </body> </html> JS文件原代码: Ext.onReady(function() { Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = "qtip"; var sexStore = new Ext.data.SimpleStore({ fields: ["sex"], data:[["雄"],["雌"],["幼"]] }); var editForm = new Ext.form.FormPanel( { title : "宠物信息", bodyStyle : "padding: 15 15 15 15", //表单边距 frame : true, height : 520, labelWidth : 55, width : 350, labelAlign : "right", //标签对齐方式 applyTo : "editForm", defaultType: 'textfield', //默认为文本框 items : [{ fieldLabel: '宠物名', id:'name', name: 'name', itemCls: "float-left", clearCls: "allow-float", allowBlank: false, blankText: '宠物名不能为空' },{ fieldLabel: '宠物ID', name: 'id', disabled: true, itemCls: "float-left", clearCls: "stop-float", width: 50, value: '123' },{ fieldLabel: '类别', itemCls: "float-left", clearCls: "allow-float", name: 'type', disabled: true, }, new Ext.form.ComboBox({ width: 50, fieldLabel: "性别", editable: false, //不可编辑 id: "sex", name: "sex", store: sexStore, triggerAction: "all", //单击触发按钮显示全部数据 displayField: "sex", mode: "local", valueField: "sex", itemCls: "float-left", clearCls: "stop-float" }),{ fieldLabel: '主人姓名', id: 'ownerName', name: 'ownerName', allowBlank: false, blankText: '宠物主人姓名不能为空' },{ fieldLabel: '主人Email', id: 'ownerEmail', name: 'ownerEmail', allowBlank: false, blankText: '宠物主人邮箱不能为空', vtype: 'email', vtypeText: '宠物主人邮箱地址格式不正确' },{ fieldLabel: '训练宠物', xtype:"panel", layout:"column", items:[ { xtype:"button", text:"喂 食", width: 65, handler: function() { alert("开吃"); } },{ xtype:"button", text:"讲故事", width: 65, handler: function() { alert("听故事"); } },{ xtype:"button", text:"游 戏", width: 65, handler: function() { alert("玩游戏"); } }] }, { id:'picture', name:'picture', xtype: 'hidden' }, { fieldLabel : "照片", xtype: 'panel', width: 200, //图片宽度 height: 200, //图片高度 html: "<img id='pic' src="images/unkown.jpg" mce_src="images/unkown.jpg">" } ,{ fieldLabel : "力量", id : "strength", name: 'strength', itemCls: "float-left", clearCls: "allow-float", width : 40, readOnly : true },{ labelWidth:40, fieldLabel : "智慧", id : "cute", name : "cute", itemCls: "float-left", clearCls: "allow-float", width : 40, readOnly : true },{ labelWidth:40, fieldLabel : "爱心", id : "love", name : "love", itemCls: "float-left", clearCls: "stop-float", width : 40, name : "petStrength", readOnly : true },{ fieldLabel: '宠物简介', xtype:'textarea', id: 'introduce', name: 'introduce', width: 240, height: 60 }], buttons:[ new Ext.Button({ text: "编 辑", handler: function() { if (this.getText() == '编 辑') { editPet(); this.setText("保 存"); } else { //写入数据库 updatePet(); disabledEdit(); this.setText("编 辑"); } } }), new Ext.Button({ text: "写日记", handler: function() { location.assign("/epet/login.jsp"); } }), new Ext.Button({ text: "退 出", handler: function() { location.assign("/epet/login.jsp"); } }) ] }); /* * 宠物信息加载 */ editForm.form.load({ waitMsg: '正在加载宠物信息', waitTitle: '加载', url: 'loadPetInfo.action', failure: function(form,action) { Ext.MessageBox.alert('提示','宠物信息加载失败!'); }, success: function(form,action) { //加个隐藏对象来接收图片值 Ext.getDom("pic").src = Ext.getDom("picture").value; disabledEdit(); } }); /* * 不允许编辑 */ function disabledEdit() { Ext.getDom("name").disabled = true; Ext.getDom("sex").disabled = true; Ext.getDom("ownerName").disabled = true; Ext.getDom("ownerEmail").disabled = true; Ext.getDom("introduce").disabled = true; } /* * 开始编辑 */ function editPet() { Ext.getDom("name").disabled = false; Ext.getDom("name").select(); Ext.getDom("sex").disabled = false; Ext.getDom("ownerName").disabled = false; Ext.getDom("ownerEmail").disabled = false; Ext.getDom("introduce").disabled = false; } /* * 保存 */ function updatePet() { editForm.form.submit({ clientValidation:true, //进行客户端验证 waitMsg: "正在保存,请稍候...", //提示信息 waitTitle: "保存中", url: "updatePet.action", //请求的地址 method: "post", success: function(form,action) { //成功的函数 Ext.Msg.show({ title: "信息", msg: "宠物信息修改成功", buttons: Ext.Msg.OK, icon: Ext.Msg.INFO }); }, failure: function(form,action) { //失败函数 Ext.Msg.show({ title: "信息", msg: "宠物修改失败", buttons: Ext.Msg.OK, icon: Ext.Msg.ERROR }); } }); } });