首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

ExtJS GTGrid 简单用户管理

Posted in Javascript onJuly 01, 2009

ExtJS GTGrid 简单用户管理ExtJS GTGrid 简单用户管理 

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>

完整的源码下载点此下载

ExtJS GTGrid 简单用户管理

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
JavaScript 异步调用
Oct 25 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
js实现贪吃蛇小游戏（加墙）
Jul 31 Javascript
Nest.js 授权验证的方法示例
Feb 22 Javascript
JQuery 风格的HTML文本转义
Jul 01 #Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 #Javascript
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 #Javascript
JavaScript XML操作 封装类
Jul 01 #Javascript
js 跨域和ajax 跨域问题小结
Jul 01 #Javascript
javawscript 三级菜单的实现原理
Jul 01 #Javascript
Javascript 函数对象的多重身份
Jun 28 #Javascript
sout(1) 输入法(2) win7(2) Sunmao(1) 蓝屏(1) Sentry(1) 滚动条(1) 403(1) 声卡驱动(1) svg(1)
You might like
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
深入理解JavaScript系列（19）：求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python time模块用法实例详解
2014/09/11 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
flask-restful使用总结
2018/12/04 Python
python画双y轴图像的示例代码
2019/07/07 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
python程序如何进行保存
2020/07/03 Python
泰国办公用品购物网站：OfficeMate
2018/02/04 全球购物
Clarks西班牙官方在线商店：clarks鞋
2019/05/03 全球购物
贝佳斯官方网站：Borghese
2020/05/08 全球购物
学习退步检讨书
2014/09/28 职场文书
单位婚育证明范本
2014/11/21 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
雷锋的观后感
2015/06/10 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
Mysql 文件配置解析介绍
2022/05/06 MySQL
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android