Ext.require(["Ext.grid.*", "Ext.data.*"]);
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.define("MyData", {
extend : "Ext.data.Model",
fields : ["id", {
name : "id",
mapping : "id"
}, {
name : "username",
mapping : "username"
}, {
name : "sex",
type : "int"
}, {
name : "createDate",
mapping : "createDate",
type : "date",
dateFormat : 'Y-m-d H:i:s'
}, {
name : "registDate",
type : "date",
dateFormat : 'Y-m-d H:i:s',
mapping : "registDate"
}]
});
var pageSize = 10;
var store = Ext.create("Ext.data.Store", {
model : "MyData",
proxy : {
type : "ajax",
url : "admin_infos.do",
reader : {
type : "json",
root : "items"
}
},
autoLoad : true
});
var grid = Ext.create("Ext.grid.Panel", {
store : store,
selType : 'checkboxmodel',
selModel : {
mode : 'id', // or SINGLE, SIMPLE ... review API for
// Ext.selection.CheckboxModel
checkOnly : false
// or false to allow checkbox selection on click anywhere in row
},
layout : "fit",
columns : [{
text : "用户名",
width : 200,
dataIndex : "username",
sortable : true,
renderer : function change(val) {
return '<span style="color:red;font-weight:bold;" class="bold" >'
+ val + '</span>';
}
}, {
text : "性别",
flex : 1,
width : 100,
dataIndex : "sex",
sortable : false,
renderer : function(v) {
if (v == 1) {
return "男";
} else {
return "女";
}
}
}, {
text : "创建日期",
width : 200,
dataIndex : "createDate",
sortable : true,
renderer : Ext.util.Format.dateRenderer('Y-m-d')
}, {
text : "注册日期",
width : 200,
dataIndex : "registDate",
sortable : true,
renderer : Ext.util.Format.dateRenderer('Y-m-d')
}, {
text : '操作',
xtype : 'actioncolumn',
width : 50,
items : [{
icon : 'totosea/images/delete.gif', // Use a URL in the
// icon config
tooltip : '删除管理员',
iconCls : 'delete',
handler : function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
function showResult(btn) {
if (btn == 'yes') {
Ext.Ajax.request({
url : 'admin_delete.do',
params : {
id : rec.get("id")
},
method : 'POST',
callback : function(options, success, response) {
if (success) {
var responseJson = Ext.JSON
.decode(response.responseText);
Ext.Msg.alert("提示信息", responseJson.msg);
store.load({
params : {
start : 0,
limit : pageSize
}
});
} else {
Ext.Msg.confirm('失败',
'请求超时或网络故障,错误编号：['
+ response.status
+ ']是否要重新发送？',
function(btn) {
if (btn == 'yes') {
Ext.Ajax
.request(options);
}
});
}
}
});
}
}
Ext.MessageBox.confirm('提示信息', '真的要删除一个管理员么?', showResult);
}
}]
}],
height : 400,
width : 800,
x : 120,
y : 40,
title : "用户信息",
renderTo : "admindata",
trackMouseOver : true, // 鼠标特效
autoScroll : true,
stateful : true,
stateId : 'stateGrid',
viewConfig : {
columnsText : "显示/隐藏列",
sortAscText : "正序排列",
sortDescText : "倒序排列",
forceFit : true,
stripeRows : true
},
bbar : new Ext.PagingToolbar({
store : store, // 数据源
pageSize : pageSize,
displayInfo : true,
displayMsg : '当前记录 {0} -- {1} 条 共 {2} 条记录',
emptyMsg : "暂无数据显示",
prevText : "上一页",
nextText : "下一页",
refreshText : "刷新",
lastText : "最后页",
firstText : "第一页",
beforePageText : "当前页",
afterPageText : "共{0}页"
}),
tbar : // 工具条
[{
text : '刷新',
cls : 'refresh',
handler : function(btn, pressed) {// 重置查询条件
store.load({
params : {
start : 0,
limit : pageSize
}
});
}
}]
});
});
/**
* 删除一个用户
*/
public void delete() {
String id = this.servletRequest.getParameter("id");
this.service.removeObject(AdminUser.class, id);
JSONObject jsono = new JSONObject();
jsono.put("msg", "删除成功");
JsonResult.json(jsono.toString(), servletResponse);
}
<%@ 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 HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'admin.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
.bold:hover{
cursor: pointer;
}
.x-grid-row-over .x-grid-cell-inner {
font-weight: bold;
}
.delete:hover{
CURSOR: pointer;
}
</style>
</head>
<script type="text/javascript" src="ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="totosea/js/admin.js"></script>
<body>
<div id="admindata"></div>
</body>
</html>
