宠物列表展示页面-优快云博客

显示宠物列表页面

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