顯示寵物列表頁面
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/petlist.js" mce_src="script/petlist.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> <center> <table width="900"> <tr> <td> <div id="petlistForm"></div> </td> </tr> </table> </center> </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 petTypeStore = new Ext.data.SimpleStore({ fields: ["type"], data:[['千禧豬'],['喵咪'],['哥斯拉']] }); var sortTypeStore = new Ext.data.SimpleStore({ fields: ["sort"], data:[['力量'],['智慧'],['愛心']] }); var Pet = Ext.data.Record.create([ { name : 'id' }, { name : 'name' }, { name : 'sex', }, { name : 'total', },{ name : 'strength', }, { name : 'cute', }, { name : 'love', },{ name : 'ownerName', }, { name : 'type', }]); var petStore = new Ext.data.JsonStore({ url : "petList.action", totalProperty : "count", root : "rows", remoteSort : true, // True表示在proxy配合下,要求服務器提供一個更新版本的數據對象以便排序,反之就是在Record緩存中排序(默認是false) pruneModifiedRecords : true, // True表示爲,每次Store加載後,清除所有修改過的記錄信息; fields : ['id','name', 'type', 'strength','cute','love','ownerName'] }); petStore.load(); function formatType(value) { var type = ""; switch (value) { case 0: type = "喵咪"; break; case 1: type = "千禧豬"; break; case 2: type = "哥斯拉"; break; } return type; } var petInfoWindow = new Ext.Window({ title : "寵物信息", width : 700, height : 370, layout : "column", buttons:[ { xtype: 'button', text: "查 找", handler: function() { } }, { xtype: 'button', text: "查 找", handler: function() { } }, { xtype: 'button', text: "查 找", handler: function() { } } ], items: [ { xtype : "form", title : "寵物查找", bodyStyle: "padding: 10 10 10 10", labelWidth : 65, labelAlign : "right", layout : "form", height : 190, buttonAlign: 'center', width : 200, items : [ { xtype : "textfield", fieldLabel : "寵物名", dataIndex : "name", anchor : "90%" }, { xtype : "textfield", fieldLabel : "主人名", anchor : "90%" }, { xtype : "combo", triggerAction : "all", fieldLabel : "寵物類別", anchor : "90%", emptyText: "-可選擇-", editable: false, //不可編輯 id: "petType", name: "petType", store: petTypeStore, displayField: "type", mode: "local", valueField: "type" }, { xtype : "combo", triggerAction : "all", fieldLabel : "排序方式", anchor : "90%", emptyText: "-可選擇-", editable: false, id: "sortType", name: "sortType", store: sortTypeStore, displayField: "sort", mode: "local", valueField: "sort" }], buttons:[ new Ext.Button({ text: "查 找", handler: function() { petDiaryForm.form.submit({ clientValidation:true, // 進行客戶端驗證 waitMsg: "正在發表...", // 提示信息 waitTitle: "發表中", url: "petDiary.action", //請求的地址 method: "post", success: function(form,action) { //成功的函數 location.href = "/epet/pet.jsp"; }, failure: function(form,action) { //失敗函數 Ext.Msg.show({ title: "信息", msg: "日記發表失敗,請把數據填完整。", buttons: Ext.Msg.OK, icon: Ext.Msg.QUESTION }); } }); } }) ] }, { xtype : "grid", title : "寵物列表", height : 300, store: petStore, columns : [ { header : "序號", align: 'center', sortable : true, resizable : true, dataIndex : "id", width : 40 },{ header : "寵物名", dataIndex : "name", width : 80 },{ header : "類別", dataIndex : "type", width : 60, renderer: formatType },{ header : "力量", align: 'right', dataIndex : "strength", width : 60 },{ header : "聰明", align: 'right', dataIndex : "cute", width: 60 },{ header : "愛心", align: 'right', dataIndex : "love", width: 60 },{ header : "主人名", dataIndex : "ownerName" }] }] }); //顯示 petInfoWindow.show(); });
我們可以新建一個 server 文件夾 ,裏面創建一個server.js 文件,來集中處理我們項目中用到的請求: var server = function(url, type, params) { return new Promi
html頁 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/Jquery1.7.js" type="te
前臺html代碼 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> select
前臺代碼 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="無刷新省市縣三聯動.aspx.cs" Inherits="無刷新省市三聯動.無刷新省市縣三聯動" %> <!D
前臺aspx <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="js/Jquery
html頁面 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/Jquery1.7.js" type="t
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>js_tag.html</title> <
大家可以看看這個網站http://www.cpton.com純java開發的性能方面測試後,沒有什麼問題,主要的瓶頸還是在與數據庫oracle,現在進過集羣之後,效果比以前好多了,持久化方面使用現在比較流行的Ibatis,半自
FormData對象是html5的一個對象,目前的一些主流的瀏覽器都已經兼容。 它是一個html5的javascript對象,非常的強大。 FormData可以憑空創建一個對象,然後往這個對象裏面添加數據,然後直接提交,不需要寫一行htm
Figure A MaskedEdit 擴展器屬性 屬性 默認值 說明 AcceptAMPM False 一個布爾屬性,用於指示是否應使用 AM/PM 符號。 AcceptNegative None
聲明:本文僅供學習研究之用,對於本文提到的某些網站的XSS漏洞,請讀者發揚高尚的人道主義精神不要去危害他人,同時希望相應的網站能夠儘快修補XSS漏洞。 簡介 XSS又叫CSS (Cross Site Script) ,跨站腳本攻擊。它指的
WEB 應用或多或少總會用到AJAX 請求,而有時AJAX 請求會出現一些問題:比如編碼問題,明明輸入的是中文咋到數據庫就成“???”了呢? 爲此我總結了一下處理此類事情的方法: 1. 使用encodeURI() 函數將字符串作爲
裝載: http://dev.21tx.com/2009/03/11/13975_1.html 1 using System; 2 using System.Collections; 3 using System.Configu
裝載:http://www.cnblogs.com/mybest/archive/2011/12/13/2285730.html 代碼:$(document).ready(function() { jQuery(
(1)服務器概述 —— 瞭解 (2)數據庫服務器 —— 難點&重點 1.如何訪問服務器 協議(語言):// 地址 / 端口號(門牌號) 2.數據庫服務器的種類 (1)網狀數據庫 (2)樹型數據庫