Spring3.0+Struts2.2+Hibernate3.6+ExtJS3.2.0+DWR框架 整合五
一、结合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();
}
});