编程 Javascript

ExtJS GTGrid 简单用户管理

Posted in Javascript onJuly 01, 2009

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 相关文章推荐

使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码

Dec 30 Javascript

用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数

Jan 21 Javascript

鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

Dec 14 Javascript

jQuery中prev()方法用法实例

Jan 08 Javascript

jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

May 16 Javascript

JS复制对应id的内容到粘贴板（Ctrl+C效果）

Jan 23 Javascript

解决ie img标签内存泄漏的问题

Oct 13 Javascript

JavaScript基于对象方法实现数组去重及排序操作示例

Jul 10 Javascript

详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件

Aug 02 Javascript

JS实现二维数组元素的排列组合运算简单示例

Jan 28 Javascript

angular4+百分比进度显示插件用法示例

May 05 Javascript

vue实现简易图片左右旋转,上一张,下一张组件案例

Jul 31 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