ExtJS GTGrid 简单用户管理_extjs

 

部分源码:

复制代码 代码如下:

<%@ 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>

完整的源码下载点此下载

时间： 2024-09-23 16:07:39

ExtJS GTGrid 简单用户管理_extjs的相关文章

ceph简单用户管理

一,列出所有用户: ceph auth list installed auth entries: mds.ceph-node1 key: AQB/+I5ZFdcwERAAg0eP7SyDg84DZUlvKzBGuA== caps: [mds] allow caps: [mon] allow profile mds caps: [osd] allow rwx osd.0 key: AQD49o5ZCatkBBAAZ31OL9xJ78XYI6sPXb9z7A== caps: [mon] allow

ExtJs九(ExtJs Mvc用户管理之一)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/25/3043757.html 首先要做的是为用户信息创建一个模型,在Scripts\app\model目录下创建一个名为User.js的文件,然后添加以下模型定义代码: Ext.define('ExtMVCOne.model.User', { extend: 'Ext.data.Model', fields: [ "id", { name: "Username", d

ExtJs十(ExtJs Mvc用户管理之二)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/26/3044152.html 前言 为了防止意外情况,这里添加了try模块,在错误的时候会将错误信息作为Msg关键字的值返回. 而 在客户端脚本,目前是没有处理错误信息的代码的,因而在这里返回的错误信息,客户端是看不到.如果要处理这样的错误信息,就要在Store的Proxy中 监听exception事件.因为exception事件的回调函数是一致的,因而可以统一到一个函数中处理,就不用复制再复制了

入门基础学习 ExtJS笔记（一）_extjs

大致看了几天的书籍 查阅了API.头脑里也记不下多少,学习还是动手比较好.就试着开始写写: 首先:开始搭个 界面框架. 第一步当然是引用ExtJs的相关文件: <link rel="Stylesheet" href="resources/css/ext-all.css" /> <script type="text/javascript" src="ext-base.js"></script>

ldap+qmail+postaci 安装, 用户管理

用户管理 ldap+qmail+postaci  安装, 用户管理 参考文献:1. 建一个大容量的webmail系统(作者:谢顺华)    目前唯一能找到的中文qmail+ldap资料    http://www.linuxforum.net/doc/webmail.html2. Postaci Webmail    基于php的webmail系统, 支持pop3, imap, 使用数据库做缓存.    相对于imp和sqwebmail来说, 配置相当容易, 而且界面很好.    (http:/

MySQL用户管理（转）

mysql|用户管理 MySQL用户管理[晏子]  http://clyan.hongnet.com/index.html MySQL管理员应该知道如何设置MySQL用户账号,指出哪个用户可以连接服务器,从哪里连接,连接后能做什么.MySQL 3.22.11开始引入两条语句使得这项工作更容易做:GRANT语句创建MySQL用户并指定其权限,而REVOKE语句删除权限.两条语句扮演了mysql数据库的前端角色,并提供与直接操作这些表的内容不同的另一种方法.CREATE和REVOKE语句影响4个表:

MySQL用户管理

mysql|用户管理 MySQL管理员应该知道如何设置MySQL用户账号,指出哪个用户可以连接服务器,从哪里连接,连接后能做什么.MySQL 3.22.11开始引入两条语句使得这项工作更容易做:GRANT语句创建MySQL用户并指定其权限,而REVOKE语句删除权限.两条语句扮演了mysql数据库的前端角色,并提供与直接操作这些表的内容不同的另一种方法.CREATE和REVOKE语句影响4个表:授权表 内容 user 能连接服务器的用户以及他们拥有的任何全局权限 db 数据库级权限 tables

利用ASP的文件操作实现用户管理

用户管理 简单.好用.开发效率高等等是ASP的优点,但是其系统操作方面如文件操作等则 是比较微弱的.要想实现这方面的功能,只有采取调用组件的办法. FileSystemObject对象就是一个例子.ASP安装后,该对象就在系统中注册了.不过其功能也非常一般,只能操作文本类型的文件.不过也可以满足我们的一些需要了.前几天我的一个同事的一个朋友在网上申请了一个支持ASP的空间,想实现诸如用户注册.信息修改.用户注销等功能,又不想用数据库来实现,因为要进行一大堆的设置.其实利用FileSystemOb

FreeBSD用户管理之增加用户

为了使用多用户的FreeBSD操作系统,必须是系统的登记用户.用户信息保存在/etc目录下passwd 文件中,在这个文件中定义的一个FreeBSD用户应具有以下属性: 用户名(Username):在系统中使用这个用户名来标识用户,每个用户名不超过8个字符,且是大小写敏感的.习惯上用户名只使用小写字母,通常根据用户真实名字的缩写来选择合适的用户名. 用户标识号(User ID):由于计算机中处理数字比处理字符串更容易,因而使用数字方式的用户标识号来区分不同用户更为适合.事实上Unix系统就是使用