首页
所有分类
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 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
js前端解决跨域问题的8种方案（最新最全）
Nov 18 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
js正则表达式简单校验方法
Jan 03 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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
python小游戏(5) 贪吃蛇(2) SnakeGame(1) 计算机视觉(2) 德生2P3(1) for(1) cvzone(1) mediapipe(1) 无限迭代(1) while(1)
You might like
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP入门学习笔记之一
2010/10/12 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
php实现加减法验证码代码
2014/02/14 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
php集成动态口令认证
2016/07/21 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
[04:55]完美世界副总裁蔡玮：DOTA2的自由、公平与信任
2013/12/18 DOTA
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
python轮询机制控制led实例
2020/05/03 Python
印度网上购物首选目的地：Flipkart
2016/08/01 全球购物
自动化专业职业生涯规划书范文
2014/01/16 职场文书
电工工作职责范本
2014/02/22 职场文书
项目合作意向书模板
2014/07/29 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
志愿服务心得体会
2016/01/15 职场文书
教师个人教学反思
2016/02/23 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android