编程 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 ready()的几种实现方法小结

Jun 18 Javascript

Jquery插件 easyUI属性汇总

Jan 19 Javascript

js解析与序列化json数据(一)json.stringify()的基本用法

Feb 01 Javascript

jQuery实现长文字部分显示代码

May 13 Javascript

构造函数+原型模式构造js自定义对象(最通用)

May 12 Javascript

Javascript实现简单二级下拉菜单实例

Jun 15 Javascript

JavaScript中this的9种应用场景及三种复合应用场景

Sep 12 Javascript

微信小程序开发之实现自定义Toast弹框

Jun 08 Javascript

ajax前台后台跨域请求处理方式

Feb 08 Javascript

浅谈Angularjs中不同类型的双向数据绑定

Jul 16 Javascript

webpack4打包vue前端多页面项目

Sep 17 Javascript

浅谈vue 组件中的setInterval方法和window的不同

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