ExtJS GTGrid 简单用户管理

部分源码:
复制代码代码如下:
<%@ page language="java" pageEncoding="GBK"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<title>用户管理首页</title>
<link rel="stylesheet" type="text/css" href="js/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-2.2/ext-all.js"></script>
<style type="text/css">
.x-panel-body p {}{
margin:5px;
}
.x-column-layout-ct .x-panel {}{
margin-bottom:5px;
}
.x-column-layout-ct .x-panel-dd-spacer {}{
margin-bottom:5px;
}
.settings {}{
background-image:url（js/ext-2.2/shared/icons/fam/folder_wrench.png）！important;
}
.nav {}{
background-image:url（js/ext-2.2/shared/icons/fam/folder_go.png）！important;
}

.icon-grid {}{
background-image: url（js/ext-2.2/shared/icons/fam/grid.png）！important;
}

#button-grid .x-panel-body {}{
border: 1px solid #99bbe8;
border-top: 0 none;
}

.add {}{
background-image: url（js/ext-2.2/shared/icons/fam/add.gif）！important;
}

.option {}{
background-image: url（js/ext-2.2/shared/icons/fam/plugin.gif）！important

}

.remove {}{
background-image: url（js/ext-2.2/shared/icons/fam/delete.gif）！important

}

.save {}{
background-image: url（js/ext-2.2/shared/icons/save.gif）！important;
}
</style>
<script>
<！--
Ext.onReady（function（）
{
/**//**Grid相关**/
Ext.QuickTips.init（）;
Ext.form.Field.prototype.msgTarget="side";
var newFormWin; //form窗口容器
var form1; //添加用户的form
var form2;; //修改用户的form

//侧边栏状态的记录
Ext.state.SessionProvider = Ext.extend（Ext.state.CookieProvider, {
readCookies : function（）{
if（this.state）{
for（var k in this.state）{
if（typeof this.state[k] == "string"）{
this.state[k] = this.decodeValue（this.state[k]）;
}
}
}
return Ext.apply（this.state || {}, Ext.state.SessionProvider.superclass.readCookies.call（this））;
}
}）;

var xg = Ext.grid;

var jsonReader = new Ext.data.JsonReader（ {
root : "list", //返回的数据集合
totalProperty : "totalCount", //总记录数
successProperty : "@success" //成功标记
}, [ {
name : "id", //grid中的dataIndex
mapping : "id", //返回的数据中的字段名
type : "int" //类型，默认为string类型
}, {
name : "username",
mapping : "username"
}, {
name : "age",
mapping : "age",
type : "int"
},
{
name : "ramark",
mapping : "remark"
}]）;

// Store
var ds = new Ext.data.Store（ {
proxy : new Ext.data.HttpProxy（ {
url : "${ctx}/UserServlet？method=getAll"
}）,
reader : jsonReader
}）;
ds.setDefaultSort（"id", "asc"）;

/**//**
***CRUD Grid
****/

//自定义的checkbox列选择
var sm = new xg.CheckboxSelectionModel（{
listeners: //添加监听器
{
//行选择事件
rowselect : function （sm, rowIndex, keep, rec） //行选中事件
{
//得到ext组件用Ext.getCmp（"id"）
var btn = Ext.getCmp（"tbar1"）;
//选择数量大于2，禁用修改按钮
if（sm.getCount（）！= 1）
{
btn.disable（）;
}
else
{
btn.enable（）;
}
},
//取消选择事件
rowdeselect : function （sm, rowIndex, keep, rec） //行选中事件
{
//得到ext组件用Ext.getCmp（"id"）
var btn = Ext.getCmp（"tbar1"）;
//数量等于1启动修改按钮
if（sm.getCount（） == 1）
{
btn.enable（）;
}
else
{
btn.disable（）;
}
}
}

}）;

//初始化Grid
var grid = new xg.GridPanel（{
id:"user-grid",
width:780,
height:450,
frame:true,
title:"简易用户管理",
iconCls:"icon-grid",
hidden: true,
store: ds, //数据仓库
renderTo: document.body,
//列
cm: new xg.ColumnModel（[
sm,
{id:"id",header: "索引", width: 40, sortable: true, dataIndex: "id"},
{header: "用户名", width: 20, sortable: true, dataIndex: "username"},
{header: "年龄", width: 20, sortable: true, dataIndex: "age"},
{header: "备注", width: 20, sortable: true, dataIndex: "remark"}
]）,

sm: sm,

viewConfig: {
forceFit:true
},
//分页工具栏
bbar : new Ext.PagingToolbar（{
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg : "显示 {0}-{1}条 / 共 {2} 条",
emptyMsg : "无数据。"
}）,

//上置内嵌工具栏（按钮）
tbar:[{
text:"添加",
tooltip:"添加一行新数据",
iconCls:"add",
handler : function（）
{
add（）;
}
}, "-", {
text:"修改",
tooltip:"修改一条数据",
iconCls:"option",
id : "tbar1",
handler : function（）
{
modify（）;
}
},"-",{
text:"删除",
tooltip:"删除数据",
iconCls:"remove",
handler : function（）
{
remove（）;
}
}]

}）;

//加载数据
ds.load（{params:{start:0, limit:10}}）;
//渲染Grid
grid.render（）;

//添加用户的函数
var add = function（）
{
newFormWin = new Ext.Window（{
layout : "fit",
width : 400,
height : 300,
closeAction : "hide",
plain : true,
title : "用户管理",
items : form1

}）;
newFormWin.show（）;
}

//修改用户的函数
var modify = function（）
{
var _record = grid.getSelectionModel（）.getSelected（）;
if （！_record）
{
Ext.Msg.alert（"请选择要修改的一项！"）;
}
else
{
myFormWin（）;
form2.form.load
（{
url : "${ctx}/UserServlet？method=getById&id="+ _record.get（"id"）,
waitMsg : "正在载入数据",

failure : function（） {
Ext.Msg.alert（"载入失败"）;
},
success : function（） {
//Ext.Msg.alert（"载入成功！"）;
}
}）;
}
}
//修改用户的窗体
var myFormWin = function（） {
newFormWin = new Ext.Window（{
layout : "fit",
width : 400,
height : 300,
closeAction : "hide",
plain : true,
title : "修改用户",
items : form2
}）;
newFormWin.show（""）;
}

/**//*注意JsonReader要放在Form上面，数据的加载顺序问题*/
var jsonFormReader = new Ext.data.JsonReader（ {
root : "list",
totalProperty : "totalCount",
successProperty : "@success"
}, [
{
name : "id",
mapping : "id",
type : "int",
},
{
name : "username",
mapping : "username"
}, {
name : "age",
mapping : "age",
type : "int"
}, {
name : "remark",
mapping : "remark"
}]）;

//添加用户的Form
form1 = new Ext.FormPanel（{
labelWidth : 75,
frame : true,
title : "添加用户",
bodyStyle : "padding:5px 5px 0",
width : 350,
waitMsgTarget : true,
url : "${ctx}/UserServlet？method=save",
defaults :
{
width : 230
},
defaultType : "textfield",
items : [
{
fieldLabel : "用户名",
name : "username", //后台得到数据用
allowBlank : false,
blankText : "用户名不能为空"
}, {
xtype : "numberfield",
maxValue : 100,
maxText : "年龄不能超过100岁",
minValue : 1,
minText : "年龄不能小于1岁",
fieldLabel : "年龄",
name : "age",
allowBlank : false,
blankText : "年龄不能为空"
}, new Ext.form.TextArea（ {
fieldLabel : "备注",
name : "remark",
growMin : 234,
maxLength : 50,
maxLengthText : "最大长度不能超过50个字符！"
}）],

buttons : [ {
text : "保存",
disabled : false,
handler : function（）
{

if（form1.form.isValid（））
{
form1.form.submit（
{
url : "${ctx}/UserServlet？method=save",
success : function（from, action）
{
Ext.Msg.alert（"添加用户成功！"）;
ds.load（{
params : {
start : 0,
limit : 10
}
}）;
},
failure : function（form, action） {
Ext.Msg.alert（"添加用户失败！"）;
},
waitMsg : "正在保存数据，稍后"
}）;
newFormWin.hide（）;
}
else
{
Ext.Msg.alert（"请确认您已经的信息是否已经填写成功！"）;
}
}
}, {
text : "取消",
handler : function（）
{
form1.form.reset（）;
}
}]
}）;

//修改用户的Form
form2 = new Ext.FormPanel（{
labelWidth : 75,
frame : true,
title : "修改用户",
bodyStyle : "padding:5px 5px 0",
width : 350,
waitMsgTarget : true,
url : "${ctx}/UserServlet？method=update",
reader : jsonFormReader, //为Form指定reader，修改用
defaults :
{
width : 230
},
defaultType : "textfield",
items : [
{
xtype: "hidden",
name : "id"
},
{
fieldLabel : "用户名",
name : "username", //后台得到数据用
allowBlank : false,
blankText : "用户名不能为空"
}, {
xtype : "numberfield",
maxValue : 100,
maxText : "年龄不能超过100岁",
minValue : 1,
minText : "年龄不能小于1岁",
fieldLabel : "年龄",
name : "age",
allowBlank : false,
blankText : "年龄不能为空"
}, new Ext.form.TextArea（ {
fieldLabel : "备注",
name : "remark",
growMin : 234,
maxLength : 50,
maxLengthText : "最大长度不能超过50个字符！"
}）],

buttons : [ {
text : "修改",
disabled : false,
handler : function（）
{

if（form2.form.isValid（））
{
form2.form.submit（
{
success : function（from, action）
{
Ext.Msg.alert（"修改用户成功！"）;
ds.load（{
params : {
start : 0,
limit : 10
}
}）;
},
failure : function（form, action） {
Ext.Msg.alert（"修改用户失败！"）;
},
waitMsg : "正在保存数据，稍后"
}）;
newFormWin.hide（）;
}
else
{
Ext.Msg.alert（"请确认您已经的信息是否已经填写成功！"）;
}
}
}, {
text : "取消",
handler : function（）
{
form2.form.reset（）;
}
}]
}）;

//删除事件
var remove = function（）
{

var _record = grid.getSelectionModel（）.getSelected（）;
if （_record）
{
Ext.MessageBox.confirm（"确认删除", "你确认要删除选择的数据吗？", function（btn）
{
if （btn == "yes"） {
var m = grid.getSelections（）;
var jsonData = "";
for （var i = 0, len = m.length;i < len; i++）
{
var ss = m[i].get（"id"）; //用户id , "id" 字段名
if （i == 0） {
jsonData = jsonData + ss;
} else {
jsonData = jsonData + "," + ss;
}
//在数据源里删除
ds.remove（m[i]）;
//删除数据库相应记录
Ext.Ajax.request（{
url: "${ctx}/UserServlet？method=remove&id="+ss
}）;
}

ds.load（{
params : {
start : 0,
limit : 10,
delData : jsonData
}
}）;

}
}）;
}
else
{
Ext.Msg.alert（"请选择要删除的数据项！"）;
}
};
/**//***/
Ext.state.Manager.setProvider
（ new Ext.state.SessionProvider（{state: Ext.appState}））;

// tabs for the center
var tabs = new Ext.TabPanel（{
region : "center",
margins : "3 3 3 0",
activeTab : 0,
defaults : {
autoScroll : true
},
items : [{
title : "ExtJS版",
contentEl: "user-grid" //要填充的html id
},{
title : "GTGrid版",
html : "GTGrid暂不支持与Extjs的整合（window）,<a href="${ctx}/gt.jsp">点此显示我做的例子</>"
},{
title : "更多关注",
html : "更多内容可关注<a href="http://www.blogjava.net/supercrsky">我的博客</a>"
}]
}）;

// Panel for the west
var nav = new Ext.Panel（{
title : "菜单目录",
region : "west",
split : true,
width : 200,
collapsible : true,
margins : "3 0 3 3",
cmargins : "3 3 3 3",
layout: "accordion",
layoutConfig:{
animate:true
},
items: [{
html: Ext.example.shortBogusMarkup,
title:"用户管理",
autoScroll:true,
border:false,
iconCls:"nav"
},{
title:"用户配置",
html: Ext.example.shortBogusConfig,
border:false,
autoScroll:true,
iconCls:"settings"
}]
}）;

var win = new Ext.Window（{
title : "用户管理微型系统",
closable : true,
maximizable : true,
minimizable : true,
width : "100%",
height : "100%",
plain : true,
layout : "border",
closable : false,
items : [nav, tabs]
}）;

win.show（）;
win.maximize（）;

}）;
-->
</script>
</head>
<body>
<！-- 侧边栏使用的js -->
<script type="text/javascript" src="js/ext-2.2/shared/examples.js"></script>
</body>
</html>

完整的源码下载点此下载