Extjs系列實例三

編輯寵物的頁面

這是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"></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 }); } }); } });

Extjs系列實例三

Extjs系列實例四

Spring中AOP幾種通知

JavaScript中對空格的處理方法

不要讓自己老的時候後悔

使用Lock和Condition完成多生產者和多消費者問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結