history1918
- 浏览: 10172 次
- 性别:
- 来自: 北京
-
最新评论
一、结合Extjs页面代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>系统用户管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/superAdmin/usermanager.js"></script>
</head>
<body>
<div>
<div id="search_panel" style="margin:8px 8px 4px 8px" ></div>
<div id="main_panel" style="margin:4px 8px 10px 8px;padding-top:5px;"></div>
<div id="add_window"></div>
<div id="alter_window"></div>
</div>
</body>
</html>
usermanager.js文件
Ext.onReady(function(){
var flag = false;
Ext.QuickTips.init();
Ext.apply(Ext.form.VTypes,{//自定义密码验证
vPassword:function(val,field){
if(field.comfirmTo){
var pwd = Ext.get(field.comfirmTo);
return (val==pwd.getValue());
}
return false;
}
});
//查询面板
var search_form = new Ext.form.FormPanel({
title:'用户搜索',
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
bodyStyle:'padding:2',//表单边距
frame : true,
collapsible: true,
height:70,
width:window.screen.width-220,
applyTo :'search_panel',
items:[
new Ext.form.TextField({
fieldLabel : '用户帐号',
id : 'user_code',
width:(window.screen.width-320)*0.18,
itemCls:'float-left',//向左浮动
clearCls:'allow-float',//允许浮动
selectOnFocus : true,//得到焦点时自动选择文本
allowBlank : true
}),
new Ext.form.TextField({
fieldLabel : '用户姓名',
id : 'name',
width:(window.screen.width-320)*0.18,
itemCls:'float-left',//向左浮动
clearCls:'allow-float',//允许浮动
selectOnFocus : true,//得到焦点时自动选择文本
allowBlank : true
}),
new Ext.form.ComboBox({
fieldLabel:"所属部门",
id:"_department",
hiddenName:'department',
editable:false,
itemCls:'float-left',//向左浮动
clearCls:'allow-float',//允许浮动
emptyText:"请选择所属部门",
width:(window.screen.width-320)*0.18,
store:new Ext.data.JsonStore({
url:'department_searchComboBox.action',
totalProperty:'totalCount',
root:'result',
fields:["id","name"]
}),
valueField:'id',
displayField:'name',
triggerAction:"all"//每次选中一项，之后再选也会将所有列表显示出来。
}),
new Ext.Button({
text : '开始查询',
iconCls:'search',
itemCls:'float-left',//向左浮动
clearCls:'allow-float',//允许浮动
handler : startSearch//注意！这个函数千万不要添加一个括号，否则后果..
})
]
});
//搜索函数
function startSearch(){
if(flag){
store = new Ext.data.JsonStore({
url:"user_search.action",
totalProperty: 'totalCount',
root: 'result',
fields:["userid","user_code","name","sex","status","email","department"]
});
}else{
var un = Ext.getCmp("user_code").getValue();
var na = Ext.getCmp("name").getValue();
var de = Ext.getCmp("_department").getValue();
//Ext.MessageBox.alert("msg","帐号："+un+"姓名："+na+"部门："+de);
if(un==""&&na==""&&de==""){
Ext.MessageBox.show({
title:"注意",
msg:"请至少输入一项再查询！！",
icon:Ext.MessageBox.WARNING,
buttons:{"ok":"确定"}
});
return ;
}
store = new Ext.data.JsonStore({
url:"user_search.action?user_code="+encodeURI(un)+"&name="+encodeURI(na)+"&department="+de,
//url:"user_search.action?user_code="+un+"&name="+na+"&department="+de,
totalProperty: 'totalCount',
root: 'result',
fields:["userid","user_code","name","sex","status","email","department"]
});
}
store.reload({
params:{
start:0,
limit:10
}
});
var colModel = new Ext.grid.ColumnModel([//配置表格列
new Ext.grid.RowNumberer({
header : '行号',
width : 40
}),
cb,
{header: "用户ID", width: 50, dataIndex: 'userid', sortable: true,hidden:true},
{header: "用户帐号", width: 100, dataIndex: 'user_code', sortable: true},
{header: "用户姓名", width: 100, dataIndex: 'name', sortable: true},
{header: "用户性别", width: 80, dataIndex: 'sex', sortable: true},
{header: "用户身份", width: 100, dataIndex: 'status', sortable: true},
{header: "用户邮箱", width: 180, dataIndex: 'email', sortable: true},
{header: "所属部门", width: 110, dataIndex: 'department', sortable: true}
]);
pagebar.bind(store);
grid.reconfigure(store,colModel);
grid.getView().refresh(true);
flag = false;
}
var store = new Ext.data.JsonStore({
url:"user_search.action",
totalProperty: 'totalCount',
pruneModifiedRecords:true,
root: 'result',
fields:["userid","user_code","name","sex","status","email","department"]
});
store.load({
params:{
start:0,
limit:10
}
});
//工具栏组件
var toolbar = new Ext.Toolbar([
{
text:'创建用户',
iconCls:'add',
disabled:false,
handler:function(btn,pressed){
getAddWindow();
}
},
'-',
{
text:'修改用户',
iconCls:'option',
disabled:false,
handler:function(btn,pressed){
getAlterWindow(grid);
}
},
'-',
{
text:'删除用户',
iconCls:'remove',
disabled:false,
handler:function(btn,pressed){
deleteUser(grid);
}
},
'-',
{
text:'重载用户列表',
iconCls:'get',
disabled:false,
handler:function(btn,pressed){
flag = true;
startSearch();
}
}
]);
//分页工具栏
var pagebar = new Ext.PagingToolbar({
store : store,
pageSize : 10,
displayInfo : true,
displayMsg : '第 {0} ~ {1} 条 共 {2} 条',
emptyMsg : '当前没有记录'
});
//创建选择模式对象
var cb = new Ext.grid.CheckboxSelectionModel({singleSelect:true});
//创建Grid表格组件
var grid = new Ext.grid.GridPanel({
renderTo : 'main_panel',
frame : true,
tbar : toolbar,
bbar : pagebar,
trackMouseOver:true, //鼠标特效
loadMask: true, //是否显示正在加载
store : store,
height : 350,
width : window.screen.width-220,
stripeRows : true,
autoScroll : true,
viewConfig : {autoFill : false},
sm : cb,
//viewConfig:{forceFit:true},
columns: [//配置表格列
new Ext.grid.RowNumberer({
header : '行号',
width : 40
}),
cb,//在面板上显示comob按钮
{header: "用户ID", width: 50, dataIndex: 'userid', sortable: true,hidden:true},
{header: "用户帐号", width: 100, dataIndex: 'user_code', sortable: true,renderer:distin},
{header: "用户姓名", width: 100, dataIndex: 'name', sortable: true},
{header: "用户性别", width: 80, dataIndex: 'sex', sortable: true},
{header: "用户身份", width: 100, dataIndex: 'status', sortable: true},
{header: "用户邮箱", width: 180, dataIndex: 'email', sortable: true},
{header: "所属部门", width: 110, dataIndex: 'department', sortable: true}
]
});
grid.addListener("celldblclick",
function(grid, rowIndex, columnIndex, e) {
var r = grid.getStore().getAt(rowIndex); // Get the Record
if(r){//判断是否选中了一行
getAlterWindow(this);
}
}
);
//判断管理员帐号是否等于value,单独在js文件中不可用。
function distin(value){
//除了下面的方法，还可以根据用户status来判断
// if(value=="${user.user_code}"){
// return "<span style='color:red;font-weight:bold'>"+value+"(管理员)</span>";
// }else{
return value;
// }
}
var addPanel = null;//增加用户面板
var alterPanel = null;//修改用户面板
//窗口1
var addWin = new Ext.Window({
layout : 'fit',
width : 400,
height : 300,
x: 100,
y: 120,
autoDestroy:true,
renderTo : "add_window",
plain : true,
title : '创建新用户',
tools:[
{id:'close',handler:refreshAddWin}
]
});
//窗口2
var alterWin = new Ext.Window({
layout : 'fit',
width : 400,
height : 300,
x: 100,
y: 120,
autoDestroy:true,
renderTo : "alter_window",
//plain : true,
title : '修改用户信息',
tools:[
{id:'close',handler:refreshAlterWin}
]
});
//获取新建用户信息的窗口
function getAddWindow(){
refreshAlterWin()
if(addPanel!=null){
refreshAddWin();
getAddWindow();
return ;//窗口中的面板未被移除，先清空面板内容，再加载数据！
}
var sselect = new Ext.form.ComboBox(
{
fieldLabel:"用户身份",
id:"status_",
hiddenName:'status_m',
editable:false,
emptyText:"请选择用户身份",
width:190,
store:new Ext.data.JsonStore({
url:'popedom_searchComboBox.action',
totalProperty:'totalCount',
root:'result',
fields:["id","status"]
}),
valueField:'id',
displayField:'status',
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
allowBlank:false,
blankText:"请选择一个权限！",
anchor:"90%"
}
);
var dselect = new Ext.form.ComboBox(
{
fieldLabel:"部门选择",
id:"department_",
hiddenName:'department_m',
editable:false,
emptyText:"请分配用户到一个部门",
width:190,
store:new Ext.data.JsonStore({
url:'department_searchComboBox.action',
totalProperty:'totalCount',
root:'result',
fields:["id","name"]
}),
valueField:'id',
displayField:'name',
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
allowBlank:false,
blankText:"请选择一个部门！",
anchor:"90%"
}
);
addPanel = new Ext.form.FormPanel({
collapsible : true,// 是否可以展开
labelWidth : 90,
labelAlign:'right',
buttonAlign:'center',
//autoScroll : true,//由于在ie中css失效，只能添加一个滚动条了。
frame : true,
bodyStyle : 'padding:5px 5px 0',
defaultType:"textfield",
items:
[
{
fieldLabel:"用户帐号",
id:"user_code_",
allowBlank:false,
blankText:"用户帐号不能为空，请填写！",
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"设置密码",
id:"pwd_",
inputType:"password",
maxLength :12,
maxLengthText :"密码最长不超过20个字符",
minLength :5,
minLengthText :"密码最短不得小于5个字符",
allowBlank:false,
blankText:"用户密码不能为空，请填写！",
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"重复密码",
id:"rpwd_",
inputType:"password",
vtype:"vPassword",
vtypeText:"两次输入的密码不一致！",
readOnly :false,//设置为可读属性
comfirmTo:"pwd_",
anchor:"90%"
},
{
fieldLabel:"用户姓名",
id:"name_",
allowBlank:false,
blankText:"用户姓名不能为空，请填写！",
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"用户性别",
id:"sex_",
xtype:"combo",
editable:false,
emptyText:"请选择性别",
store:["男","女","保密"],//数据源是一个数组
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
anchor:"90%"
},
sselect,//用户身份下拉框
{
fieldLabel:"用户邮箱",
id:"email_",
vtype:"email",
vtypeText:"不是有效的邮箱地址",
readOnly :false,//设置为可读属性
anchor:"90%"
},
dselect//用户所属部门下拉框
],
buttons:[{
xtype:"button",
text : '提交',
iconCls:'save',
cls:"x-btn-text-icon",
clearCls:'allow-float',//允许浮动
itemCls:'float-left',//向左浮动
handler : function() {
if (addPanel.form.isValid()) {
addPanel.form.submit( {
url : 'user_add.action',
success : function(from, action) {
refreshAddWin();
Ext.MessageBox.show({
title:"添加成功",
msg:"成功创建一个新用户！",
width:200,
icon:Ext.MessageBox.OK,
buttons:{"ok":"确定"}
});
flag = true;
startSearch();
},
failure : function(form, action) {
refreshAddWin();
Ext.MessageBox.show({
title:"创建失败",
msg:"请换一个用户帐号再试！！",
width:200,
icon:Ext.MessageBox.ERROR,
buttons:{"ok":"确定"}
});
},
waitMsg : '正在保存数据，请勿切断连接...'
});
}
}
},
{
xtype:"button",
text : '取消',
iconCls:'cancel',
cls:"x-btn-text-icon",
clearCls:'allow-float',//允许浮动
itemCls:'float-left',//向左浮动
handler : refreshAddWin
}
]
});
addWin.add(addPanel);
addWin.show();
}
//获取修改用户信息的一个窗口
function getAlterWindow(grid){
var record = grid.getSelectionModel().getSelected();
if (!record) {
Ext.MessageBox.alert('注意','请先在列表中选择一个用户！');
} else {
refreshAddWin();
if(alterPanel!=null){
refreshAlterWin();
getAlterWindow(grid);
return ;//窗口中的面板未被移除，先清空面板内容，再加载数据！
}
var sselect = new Ext.form.ComboBox(
{
fieldLabel:"修改身份",
id:"status_",
hiddenName:'status_m',
editable:false,
//emptyText:" "+record.get("status"),
width:190,
store:new Ext.data.JsonStore({
url:'popedom_searchComboBox.action',
totalProperty:'totalCount',
root:'result',
fields:["id","status"]
}),
valueField:'id',
displayField:'status',
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
allowBlank:false,
blankText:"请选择一个新权限！",
anchor:"90%"
}
);
var dselect = new Ext.form.ComboBox(
{
fieldLabel:"部门选择",
id:"department_",
hiddenName:'department_m',
editable:false,
width:190,
store:new Ext.data.JsonStore({
url:'department_searchComboBox.action',
totalProperty:'totalCount',
root:'result',
fields:["id","name"]
}),
valueField:'id',
displayField:'name',
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
allowBlank:false,
blankText:"请选择一个部门！",
anchor:"90%"
}
);
alterPanel = new Ext.form.FormPanel({
collapsible : true,// 是否可以展开
labelWidth : 90,
labelAlign:'right',
buttonAlign:'center',
//autoScroll : true,//由于在ie中css失效，只能添加一个滚动条了。
frame : true,
bodyStyle : 'padding:5px 5px 0',
defaultType:"textfield",
items:
[
{
fieldLabel:"用户id",
id:"userid",
hidden :true,
hideLabel:true,
value:record.get("userid"),
readOnly :true,//设置为不可读属性
anchor:"90%"
},
{
fieldLabel:"修改帐号",
id:"user_code_",
value:record.get("user_code"),
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"修改密码",
id:"pwd_",
value:record.get("pwd"),
allowBlank:false,
blankText:"用户密码不能为空，请填写！",
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"修改姓名",
id:"name_",
value:record.get("name"),
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"用户性别",
id:"sex_",
value:record.get("sex"),
xtype:"combo",
editable:false,
emptyText:"请选择性别",
store:["男","女","保密"],//数据源是一个数组
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
anchor:"90%"
},
sselect,//用户身份下拉框
{
fieldLabel:"修改Email",
id:"email_",
value:record.get("email"),
vtype:"email",
vtypeText:"不是有效的邮箱地址",
readOnly :false,//设置为可读属性
anchor:"90%"
},
dselect//用户所属部门下拉框
],
buttons:[{
xtype:"button",
text : '修改',
iconCls:'save',
cls:"x-btn-text-icon",
clearCls:'allow-float',//允许浮动
itemCls:'float-left',//向左浮动
handler : function() {
if (alterPanel.form.isValid()) {
alterPanel.form.submit( {
url : 'user_alter.action',
success : function(from, action) {
refreshAlterWin();
Ext.MessageBox.show({
title:"修改成功",
msg:"用户信息修改成功！",
width:200,
icon:Ext.MessageBox.OK,
buttons:{"ok":"确定"}
});
flag = true;
startSearch();
},
failure : function(form, action) {
refreshAlterWin();
Ext.MessageBox.show({
title:"修改失败",
msg:"请刷新网页再试！！",
width:200,
icon:Ext.MessageBox.ERROR,
buttons:{"ok":"确定"}
});
},
waitMsg : '正在保存数据，请勿切断连接...'
});
}
}
},
{
xtype:"button",
text : '取消',
iconCls:'cancel',
cls:"x-btn-text-icon",
clearCls:'allow-float',//允许浮动
itemCls:'float-left',//向左浮动
handler : refreshAlterWin
}
]
});
alterWin.add(alterPanel);
alterWin.show();
}
}
//删除一个用户
function deleteUser(grid){
var record = grid.getSelectionModel().getSelected();
if (!record) {
Ext.MessageBox.alert('注意','请先在列表中选择一个用户！');
} else {
//先隐藏修改面板and添加面板
refreshAlterWin();
refreshAddWin();
Ext.MessageBox.show({
title:"警告",
msg:"您确定要删除用户["+record.get("user_code")+"]吗?",
width:250,
fn:function(passed){
if(passed=="ok"){
var ajaxConfig = {
url:"user_delete.action?userid="+record.get("userid"),//请求地址
callback:function(options,success,response){
var msg = response.responseText;
if(success){
if(msg=="success"){//删除成功！
Ext.MessageBox.show({
title:"消息",
width:250,
msg:"删除成功！",
icon:Ext.MessageBox.INFO,
buttons:{"ok":"确定"}
});
flag = true;
startSearch();
}else{//删除失败！
Ext.Msg.alert("消息","删除失败！");
}
}else{//服务器无响应！
Ext.MessageBox.show({
title:"消息",
width:250,
msg:"操作失败！请刷新页面再试！",
icon:Ext.MessageBox.ERROR,
buttons:{"ok":"确定"}
});
}
}
};
Ext.Ajax.request(ajaxConfig);
}
},
icon:Ext.MessageBox.WARNING,
buttons:Ext.MessageBox.OKCANCEL
});
}
}
//清空窗口面板
function refreshAddWin(){
addWin.remove(addPanel);
addPanel=null;
addWin.hide();
}
function refreshAlterWin(){
alterWin.remove(alterPanel);
alterPanel=null;
alterWin.hide();
}
});
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>系统用户管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/superAdmin/usermanager.js"></script>
</head>
<body>
<div>
<div id="search_panel" style="margin:8px 8px 4px 8px" ></div>
<div id="main_panel" style="margin:4px 8px 10px 8px;padding-top:5px;"></div>
<div id="add_window"></div>
<div id="alter_window"></div>
</div>
</body>
</html>
usermanager.js文件
Ext.onReady(function(){
var flag = false;
Ext.QuickTips.init();
Ext.apply(Ext.form.VTypes,{//自定义密码验证
vPassword:function(val,field){
if(field.comfirmTo){
var pwd = Ext.get(field.comfirmTo);
return (val==pwd.getValue());
}
return false;
}
});
//查询面板
var search_form = new Ext.form.FormPanel({
title:'用户搜索',
labelSeparator :'：',//分隔符
labelWidth : 80,//标签宽度
bodyStyle:'padding:2',//表单边距
frame : true,
collapsible: true,
height:70,
width:window.screen.width-220,
applyTo :'search_panel',
items:[
new Ext.form.TextField({
fieldLabel : '用户帐号',
id : 'user_code',
width:(window.screen.width-320)*0.18,
itemCls:'float-left',//向左浮动
clearCls:'allow-float',//允许浮动
selectOnFocus : true,//得到焦点时自动选择文本
allowBlank : true
}),
new Ext.form.TextField({
fieldLabel : '用户姓名',
id : 'name',
width:(window.screen.width-320)*0.18,
itemCls:'float-left',//向左浮动
clearCls:'allow-float',//允许浮动
selectOnFocus : true,//得到焦点时自动选择文本
allowBlank : true
}),
new Ext.form.ComboBox({
fieldLabel:"所属部门",
id:"_department",
hiddenName:'department',
editable:false,
itemCls:'float-left',//向左浮动
clearCls:'allow-float',//允许浮动
emptyText:"请选择所属部门",
width:(window.screen.width-320)*0.18,
store:new Ext.data.JsonStore({
url:'department_searchComboBox.action',
totalProperty:'totalCount',
root:'result',
fields:["id","name"]
}),
valueField:'id',
displayField:'name',
triggerAction:"all"//每次选中一项，之后再选也会将所有列表显示出来。
}),
new Ext.Button({
text : '开始查询',
iconCls:'search',
itemCls:'float-left',//向左浮动
clearCls:'allow-float',//允许浮动
handler : startSearch//注意！这个函数千万不要添加一个括号，否则后果..
})
]
});
//搜索函数
function startSearch(){
if(flag){
store = new Ext.data.JsonStore({
url:"user_search.action",
totalProperty: 'totalCount',
root: 'result',
fields:["userid","user_code","name","sex","status","email","department"]
});
}else{
var un = Ext.getCmp("user_code").getValue();
var na = Ext.getCmp("name").getValue();
var de = Ext.getCmp("_department").getValue();
//Ext.MessageBox.alert("msg","帐号："+un+"姓名："+na+"部门："+de);
if(un==""&&na==""&&de==""){
Ext.MessageBox.show({
title:"注意",
msg:"请至少输入一项再查询！！",
icon:Ext.MessageBox.WARNING,
buttons:{"ok":"确定"}
});
return ;
}
store = new Ext.data.JsonStore({
url:"user_search.action?user_code="+encodeURI(un)+"&name="+encodeURI(na)+"&department="+de,
//url:"user_search.action?user_code="+un+"&name="+na+"&department="+de,
totalProperty: 'totalCount',
root: 'result',
fields:["userid","user_code","name","sex","status","email","department"]
});
}
store.reload({
params:{
start:0,
limit:10
}
});
var colModel = new Ext.grid.ColumnModel([//配置表格列
new Ext.grid.RowNumberer({
header : '行号',
width : 40
}),
cb,
{header: "用户ID", width: 50, dataIndex: 'userid', sortable: true,hidden:true},
{header: "用户帐号", width: 100, dataIndex: 'user_code', sortable: true},
{header: "用户姓名", width: 100, dataIndex: 'name', sortable: true},
{header: "用户性别", width: 80, dataIndex: 'sex', sortable: true},
{header: "用户身份", width: 100, dataIndex: 'status', sortable: true},
{header: "用户邮箱", width: 180, dataIndex: 'email', sortable: true},
{header: "所属部门", width: 110, dataIndex: 'department', sortable: true}
]);
pagebar.bind(store);
grid.reconfigure(store,colModel);
grid.getView().refresh(true);
flag = false;
}
var store = new Ext.data.JsonStore({
url:"user_search.action",
totalProperty: 'totalCount',
pruneModifiedRecords:true,
root: 'result',
fields:["userid","user_code","name","sex","status","email","department"]
});
store.load({
params:{
start:0,
limit:10
}
});
//工具栏组件
var toolbar = new Ext.Toolbar([
{
text:'创建用户',
iconCls:'add',
disabled:false,
handler:function(btn,pressed){
getAddWindow();
}
},
'-',
{
text:'修改用户',
iconCls:'option',
disabled:false,
handler:function(btn,pressed){
getAlterWindow(grid);
}
},
'-',
{
text:'删除用户',
iconCls:'remove',
disabled:false,
handler:function(btn,pressed){
deleteUser(grid);
}
},
'-',
{
text:'重载用户列表',
iconCls:'get',
disabled:false,
handler:function(btn,pressed){
flag = true;
startSearch();
}
}
]);
//分页工具栏
var pagebar = new Ext.PagingToolbar({
store : store,
pageSize : 10,
displayInfo : true,
displayMsg : '第 {0} ~ {1} 条 共 {2} 条',
emptyMsg : '当前没有记录'
});
//创建选择模式对象
var cb = new Ext.grid.CheckboxSelectionModel({singleSelect:true});
//创建Grid表格组件
var grid = new Ext.grid.GridPanel({
renderTo : 'main_panel',
frame : true,
tbar : toolbar,
bbar : pagebar,
trackMouseOver:true, //鼠标特效
loadMask: true, //是否显示正在加载
store : store,
height : 350,
width : window.screen.width-220,
stripeRows : true,
autoScroll : true,
viewConfig : {autoFill : false},
sm : cb,
//viewConfig:{forceFit:true},
columns: [//配置表格列
new Ext.grid.RowNumberer({
header : '行号',
width : 40
}),
cb,//在面板上显示comob按钮
{header: "用户ID", width: 50, dataIndex: 'userid', sortable: true,hidden:true},
{header: "用户帐号", width: 100, dataIndex: 'user_code', sortable: true,renderer:distin},
{header: "用户姓名", width: 100, dataIndex: 'name', sortable: true},
{header: "用户性别", width: 80, dataIndex: 'sex', sortable: true},
{header: "用户身份", width: 100, dataIndex: 'status', sortable: true},
{header: "用户邮箱", width: 180, dataIndex: 'email', sortable: true},
{header: "所属部门", width: 110, dataIndex: 'department', sortable: true}
]
});
grid.addListener("celldblclick",
function(grid, rowIndex, columnIndex, e) {
var r = grid.getStore().getAt(rowIndex); // Get the Record
if(r){//判断是否选中了一行
getAlterWindow(this);
}
}
);
//判断管理员帐号是否等于value,单独在js文件中不可用。
function distin(value){
//除了下面的方法，还可以根据用户status来判断
// if(value=="${user.user_code}"){
// return "<span style='color:red;font-weight:bold'>"+value+"(管理员)</span>";
// }else{
return value;
// }
}
var addPanel = null;//增加用户面板
var alterPanel = null;//修改用户面板
//窗口1
var addWin = new Ext.Window({
layout : 'fit',
width : 400,
height : 300,
x: 100,
y: 120,
autoDestroy:true,
renderTo : "add_window",
plain : true,
title : '创建新用户',
tools:[
{id:'close',handler:refreshAddWin}
]
});
//窗口2
var alterWin = new Ext.Window({
layout : 'fit',
width : 400,
height : 300,
x: 100,
y: 120,
autoDestroy:true,
renderTo : "alter_window",
//plain : true,
title : '修改用户信息',
tools:[
{id:'close',handler:refreshAlterWin}
]
});
//获取新建用户信息的窗口
function getAddWindow(){
refreshAlterWin()
if(addPanel!=null){
refreshAddWin();
getAddWindow();
return ;//窗口中的面板未被移除，先清空面板内容，再加载数据！
}
var sselect = new Ext.form.ComboBox(
{
fieldLabel:"用户身份",
id:"status_",
hiddenName:'status_m',
editable:false,
emptyText:"请选择用户身份",
width:190,
store:new Ext.data.JsonStore({
url:'popedom_searchComboBox.action',
totalProperty:'totalCount',
root:'result',
fields:["id","status"]
}),
valueField:'id',
displayField:'status',
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
allowBlank:false,
blankText:"请选择一个权限！",
anchor:"90%"
}
);
var dselect = new Ext.form.ComboBox(
{
fieldLabel:"部门选择",
id:"department_",
hiddenName:'department_m',
editable:false,
emptyText:"请分配用户到一个部门",
width:190,
store:new Ext.data.JsonStore({
url:'department_searchComboBox.action',
totalProperty:'totalCount',
root:'result',
fields:["id","name"]
}),
valueField:'id',
displayField:'name',
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
allowBlank:false,
blankText:"请选择一个部门！",
anchor:"90%"
}
);
addPanel = new Ext.form.FormPanel({
collapsible : true,// 是否可以展开
labelWidth : 90,
labelAlign:'right',
buttonAlign:'center',
//autoScroll : true,//由于在ie中css失效，只能添加一个滚动条了。
frame : true,
bodyStyle : 'padding:5px 5px 0',
defaultType:"textfield",
items:
[
{
fieldLabel:"用户帐号",
id:"user_code_",
allowBlank:false,
blankText:"用户帐号不能为空，请填写！",
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"设置密码",
id:"pwd_",
inputType:"password",
maxLength :12,
maxLengthText :"密码最长不超过20个字符",
minLength :5,
minLengthText :"密码最短不得小于5个字符",
allowBlank:false,
blankText:"用户密码不能为空，请填写！",
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"重复密码",
id:"rpwd_",
inputType:"password",
vtype:"vPassword",
vtypeText:"两次输入的密码不一致！",
readOnly :false,//设置为可读属性
comfirmTo:"pwd_",
anchor:"90%"
},
{
fieldLabel:"用户姓名",
id:"name_",
allowBlank:false,
blankText:"用户姓名不能为空，请填写！",
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"用户性别",
id:"sex_",
xtype:"combo",
editable:false,
emptyText:"请选择性别",
store:["男","女","保密"],//数据源是一个数组
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
anchor:"90%"
},
sselect,//用户身份下拉框
{
fieldLabel:"用户邮箱",
id:"email_",
vtype:"email",
vtypeText:"不是有效的邮箱地址",
readOnly :false,//设置为可读属性
anchor:"90%"
},
dselect//用户所属部门下拉框
],
buttons:[{
xtype:"button",
text : '提交',
iconCls:'save',
cls:"x-btn-text-icon",
clearCls:'allow-float',//允许浮动
itemCls:'float-left',//向左浮动
handler : function() {
if (addPanel.form.isValid()) {
addPanel.form.submit( {
url : 'user_add.action',
success : function(from, action) {
refreshAddWin();
Ext.MessageBox.show({
title:"添加成功",
msg:"成功创建一个新用户！",
width:200,
icon:Ext.MessageBox.OK,
buttons:{"ok":"确定"}
});
flag = true;
startSearch();
},
failure : function(form, action) {
refreshAddWin();
Ext.MessageBox.show({
title:"创建失败",
msg:"请换一个用户帐号再试！！",
width:200,
icon:Ext.MessageBox.ERROR,
buttons:{"ok":"确定"}
});
},
waitMsg : '正在保存数据，请勿切断连接...'
});
}
}
},
{
xtype:"button",
text : '取消',
iconCls:'cancel',
cls:"x-btn-text-icon",
clearCls:'allow-float',//允许浮动
itemCls:'float-left',//向左浮动
handler : refreshAddWin
}
]
});
addWin.add(addPanel);
addWin.show();
}
//获取修改用户信息的一个窗口
function getAlterWindow(grid){
var record = grid.getSelectionModel().getSelected();
if (!record) {
Ext.MessageBox.alert('注意','请先在列表中选择一个用户！');
} else {
refreshAddWin();
if(alterPanel!=null){
refreshAlterWin();
getAlterWindow(grid);
return ;//窗口中的面板未被移除，先清空面板内容，再加载数据！
}
var sselect = new Ext.form.ComboBox(
{
fieldLabel:"修改身份",
id:"status_",
hiddenName:'status_m',
editable:false,
//emptyText:" "+record.get("status"),
width:190,
store:new Ext.data.JsonStore({
url:'popedom_searchComboBox.action',
totalProperty:'totalCount',
root:'result',
fields:["id","status"]
}),
valueField:'id',
displayField:'status',
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
allowBlank:false,
blankText:"请选择一个新权限！",
anchor:"90%"
}
);
var dselect = new Ext.form.ComboBox(
{
fieldLabel:"部门选择",
id:"department_",
hiddenName:'department_m',
editable:false,
width:190,
store:new Ext.data.JsonStore({
url:'department_searchComboBox.action',
totalProperty:'totalCount',
root:'result',
fields:["id","name"]
}),
valueField:'id',
displayField:'name',
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
allowBlank:false,
blankText:"请选择一个部门！",
anchor:"90%"
}
);
alterPanel = new Ext.form.FormPanel({
collapsible : true,// 是否可以展开
labelWidth : 90,
labelAlign:'right',
buttonAlign:'center',
//autoScroll : true,//由于在ie中css失效，只能添加一个滚动条了。
frame : true,
bodyStyle : 'padding:5px 5px 0',
defaultType:"textfield",
items:
[
{
fieldLabel:"用户id",
id:"userid",
hidden :true,
hideLabel:true,
value:record.get("userid"),
readOnly :true,//设置为不可读属性
anchor:"90%"
},
{
fieldLabel:"修改帐号",
id:"user_code_",
value:record.get("user_code"),
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"修改密码",
id:"pwd_",
value:record.get("pwd"),
allowBlank:false,
blankText:"用户密码不能为空，请填写！",
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"修改姓名",
id:"name_",
value:record.get("name"),
readOnly :false,//设置为可读属性
anchor:"90%"
},
{
fieldLabel:"用户性别",
id:"sex_",
value:record.get("sex"),
xtype:"combo",
editable:false,
emptyText:"请选择性别",
store:["男","女","保密"],//数据源是一个数组
triggerAction:"all",//每次选中一项，之后再选也会将所有列表显示出来。
anchor:"90%"
},
sselect,//用户身份下拉框
{
fieldLabel:"修改Email",
id:"email_",
value:record.get("email"),
vtype:"email",
vtypeText:"不是有效的邮箱地址",
readOnly :false,//设置为可读属性
anchor:"90%"
},
dselect//用户所属部门下拉框
],
buttons:[{
xtype:"button",
text : '修改',
iconCls:'save',
cls:"x-btn-text-icon",
clearCls:'allow-float',//允许浮动
itemCls:'float-left',//向左浮动
handler : function() {
if (alterPanel.form.isValid()) {
alterPanel.form.submit( {
url : 'user_alter.action',
success : function(from, action) {
refreshAlterWin();
Ext.MessageBox.show({
title:"修改成功",
msg:"用户信息修改成功！",
width:200,
icon:Ext.MessageBox.OK,
buttons:{"ok":"确定"}
});
flag = true;
startSearch();
},
failure : function(form, action) {
refreshAlterWin();
Ext.MessageBox.show({
title:"修改失败",
msg:"请刷新网页再试！！",
width:200,
icon:Ext.MessageBox.ERROR,
buttons:{"ok":"确定"}
});
},
waitMsg : '正在保存数据，请勿切断连接...'
});
}
}
},
{
xtype:"button",
text : '取消',
iconCls:'cancel',
cls:"x-btn-text-icon",
clearCls:'allow-float',//允许浮动
itemCls:'float-left',//向左浮动
handler : refreshAlterWin
}
]
});
alterWin.add(alterPanel);
alterWin.show();
}
}
//删除一个用户
function deleteUser(grid){
var record = grid.getSelectionModel().getSelected();
if (!record) {
Ext.MessageBox.alert('注意','请先在列表中选择一个用户！');
} else {
//先隐藏修改面板and添加面板
refreshAlterWin();
refreshAddWin();
Ext.MessageBox.show({
title:"警告",
msg:"您确定要删除用户["+record.get("user_code")+"]吗?",
width:250,
fn:function(passed){
if(passed=="ok"){
var ajaxConfig = {
url:"user_delete.action?userid="+record.get("userid"),//请求地址
callback:function(options,success,response){
var msg = response.responseText;
if(success){
if(msg=="success"){//删除成功！
Ext.MessageBox.show({
title:"消息",
width:250,
msg:"删除成功！",
icon:Ext.MessageBox.INFO,
buttons:{"ok":"确定"}
});
flag = true;
startSearch();
}else{//删除失败！
Ext.Msg.alert("消息","删除失败！");
}
}else{//服务器无响应！
Ext.MessageBox.show({
title:"消息",
width:250,
msg:"操作失败！请刷新页面再试！",
icon:Ext.MessageBox.ERROR,
buttons:{"ok":"确定"}
});
}
}
};
Ext.Ajax.request(ajaxConfig);
}
},
icon:Ext.MessageBox.WARNING,
buttons:Ext.MessageBox.OKCANCEL
});
}
}
//清空窗口面板
function refreshAddWin(){
addWin.remove(addPanel);
addPanel=null;
addWin.hide();
}
function refreshAlterWin(){
alterWin.remove(alterPanel);
alterPanel=null;
alterWin.hide();
}
});
分享到：
发表评论
相关推荐
项目配置:Hibernate3.3.2+Spring3.0+Struts2.2.3 + ext3.4.0,真实项目实现,项目中可参考经典权限设计,通用数据录入,批量数据处理(poi),统一的JSON格式封装,灵活的组合模式设计,EXTJS面向组件编程参考......
在本项目中，我们探讨的是如何将三个主流的Java企业级框架——Spring 3.0、Hibernate 4.0和Spring MVC与JavaScript前端框架ExtJS 4进行深度整合，以构建一个高效、灵活且功能丰富的Web应用。这个整合旨在提供一个...
在本项目中，我们探讨的是一个基于Web的简单图书管理系统，该系统采用了经典的Java企业级开发框架：ExtJS 3.0、Spring、Hibernate以及Struts。这些技术的结合为开发高效、可维护的Web应用提供了强大的支持。下面将...
DWR2+EXTJS2.2+Hibernate3.3+Spring2+Acegi 做的综合管理系统，数据库采用MYSQL，分层清晰，业务相对复杂，是学习框架不可多得的项目。这个是分卷，同时下载2.3.4部分
DWR2+EXTJS2.2+Hibernate3.3+Spring2+Acegi 做的综合管理系统，数据库采用MYSQL，分层清晰，业务相对复杂，是学习框架不可多得的项目。
DWR2+EXTJS2.2+Hibernate3.3+Spring2+Acegi 做的综合管理系统，数据库采用MYSQL，分层清晰，业务相对复杂，是学习框架不可多得的项目。
ExtJS 3.0 和 Struts2 是两个在Web开发领域广泛应用的开源框架。ExtJS 是一个用于构建富客户端（Rich Internet Applications，RIA）的JavaScript库，它提供了丰富的组件库和用户界面，使得开发者可以创建出具有桌面...
在“extjs+spring+struts+hibernate”整合中，通常会利用Spring作为核心框架，管理整个应用的依赖和事务；Struts负责处理HTTP请求，并转发到相应的业务逻辑；Hibernate则负责对象与数据库之间的映射，实现数据的持久...
综上所述，这个“DWR2+EXTJS2.2+Hibernate3.3+Spring2+Acegi”综合管理系统结合了这些技术的优势，构建了一个分层清晰、业务复杂的系统。DWR2和EXTJS2.2负责前端交互和用户界面，提供流畅的用户体验；Hibernate3.3...
总结起来，"DWR+extjs+spring+hibernate"的组合是现代Web应用开发的一个强大工具集，它能够帮助开发者快速构建出交互性强、性能优异的企业级应用。通过深入理解和熟练掌握这四个技术，可以显著提升开发者的技能水平...
在"Hibernate+Spring+Struts2+ExtJS整合开发实例"中，开发者通常会利用这些框架的协同工作来实现CRUD（Create, Read, Update, Delete）操作，这是数据库应用的基本功能： 1. **创建（Create）**: 用户通过ExtJS的...
将jbpm4.0、EXT3.0、Spring和Hibernate整合在一起，可以构建出一个功能强大的业务流程管理系统。Spring作为整体架构的胶水，管理各组件的生命周期；Hibernate负责数据持久化，处理与数据库的交互；jbpm4.0则处理业务...
strut2+hibernate+spring+extjs3.0+excel 动态加载grid 数据导出excel,导入excel datasource自己修改你自己的数据源，数据库中的表可见实体类创建，或者自己修改实体类
【标题】"Struts2(json-plugin) + Spring2 + ExtJS2.2 开源网络硬盘系统"是一个基于Java技术栈的开源项目，它利用了Struts2框架的json-plugin插件，Spring2作为服务层管理和依赖注入框架，以及ExtJS2.2作为前端展示...
采用了struts2.0，spring2.2，ibatis，quartz，extjs3.0 实现了关于短信的调度框架，对接收人维护，动态添加每日短信数据，编写短信模版，最后通过quartz定时发送，因为短信接口收费所以不提供，需要jar包自己下载，...
SSH框架，全称为Spring、Struts2和Hibernate的组合，是Java Web开发中常见的三大开源框架集成。这个框架集合提供了模型-视图-控制器（MVC）架构模式，数据库持久化，以及强大的前端展示能力，使得开发者能高效地构建...
该项目是用EXTJS+Struts2，是实现EXTJS与后台数据交互的例子； 我从网上找的EXTJS的相关例子程序，自己在本地eclipse中创建成了完整项目，修改了代码BUG和浏览器兼容问题； 现在将完整的项目代码打包分享，对于想...