Extjs3.x Struts2 -Json-plugin学习实例 -User管理页面 - 完 07
user_list.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
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">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="extjs/radiogroup.js"></script>
<link rel="stylesheet" type="text/css" href="extjs/examples.css" />
<script type="text/javascript" src="extjs/examples.js"></script>
<script type="text/javascript" src="user.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="dept"></div>
<div id="topic-win" class="x-hidden">
</body>
</html>
user.js
var _reader = new Ext.data.JsonReader({
root:"users"
},[
{name:"id",type:"int",mapping:"id"},
{name:"name",type:"string",mapping:"name"},
{name:"username",type:"string",mapping:"username"},
{name:"password",type:"string",mapping:"password"},
{name:"sex",type:"boolean",mapping:"sex"},
{name:"phone",type:"string",mapping:"phone"},
{name:"tel",type:"string",mapping:"tel"},
{name:"url",type:"string",mapping:"url"},
{name:"email",type:"string",mapping:"email"},
{name:"deptId",type:"int",mapping:"dept.id"},
{name:"deptName",type:"string",mapping:"dept.name"},
{name:"address",type:"string",mapping:"address"},
{name:"description",type:"string",mapping:"description"}
]);
var user_store = new Ext.data.Store({
baseParams:{
start:0,
limit:20
},
sortInfo:{
field:"id",
dirction:"asc"
},
//autoLoad:true,
remoteSort:true,
proxy:new Ext.data.HttpProxy({
url:"user.action",
method:"POST"
}),
reader:_reader
});
var _sm = new Ext.grid.CheckboxSelectionModel();
var user_cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
_sm,
{header:"ID",width:40,dataIndex:"id",sortable:true,algin:"center"},
{header:"用户名",width:60,dataIndex:"username",sortable:true},
{header:"姓名",width:60,dataIndex:"name",sortable:true},
{header:"性别",width:40,dataIndex:"sex",sortable:true,align:"center",
renderer:function(_value){
if(_value){
return '男';
} else {
return '女';
}
}
},
{header:"部门",width:70,dataIndex:"deptName",sortable:true},
{header:"联系电话",width:90,dataIndex:"phone",sortable:true},
{header:"移动电话",width:90,dataIndex:"tel",sortable:true},
{header:"电子邮件",width:110,dataIndex:"email",sortable:true,
renderer:function(_value){
return '<a href="mailto:' + _value + '" ext:qtip="' + _value + '">' + Ext.util.Format.ellipsis(_value, 15) + '</a>';
}
},
{header:"联系地址",width:120,dataIndex:"address",sortable:true,
renderer:function(_value){
return '<span ext:qtip="' + _value + '">' + Ext.util.Format.ellipsis(_value, 12) + '</span>';
}
},
{header:"描述",dataIndex:"description",id:"description"}
]);
var addOrModify = function(_url, _id){
var deptCombo_store = new Ext.data.Store({
reader:new Ext.data.JsonReader({
root:'depts'
}, Ext.data.Record.create([
{name:'id',type:'int',mapping:'id'},
{name:'name',type:'string',mapping:'name'}
])),
proxy:new Ext.data.HttpProxy({
url:'dept',
method:'POST'
}),
//autoLoad:true,
listeners:{
'load':function(){
/*
if(_id){
var comb = Ext.getCmp('deptCombo');
var _rec = user_grid.getSelectionModel().getSelected();
if(comb){
comb.setValue(_rec.get('deptId'));
}
}
*/
}
}
});
new Ext.Window({
id:'addOrModifyWin',
title:'用户信息',
width:380,
autoHeight:true,
//height:250,
resizable:false,
modal:true,
animateTarget:'addUser',
closeAction:'close',
listeners:{
'show':function(){
btn_add.disable();
btn_modify.disable();
},
'close':function(){
btn_add.enable();
btn_modify.enable();
}
},
items:[{
xtype:'form',
id:'addOrModifyForm',
layout:'form',
labelWidth:70,
labelAlign:'right',
labelPad:10,
frame:true,
border:false,
waitMsgTarget:true,
bodyStyle:"padding:5px 5px 0",
defaultType:'textfield',
defaults:{
width:230,
msgTarget:'side'//验证信息显示在右边
},
items:[{
xtype:'hidden',
name:'user.id',
value:0
},{
fieldLabel:'用户名',
name:'user.username',
allowBlank:false,
emptyText:'请输入用户名',
},{
inputType:'password',
fieldLabel:'用户密码',
name:'user.password',
allowBlank:false
},{
fieldLabel:'姓名',
name:'user.name',
allowBlank:false,
blankText:'姓名不能为空'
},{
xtype:'ux-radiogroup',
fieldLabel:'性别',
id:'sex',
name:'user.sex',
horizontal:true,
radios:[{
name:'sex',
boxLabel:'男 ',
value:true,
checked:true
},{
name:'sex',
boxLabel:'女',
value:false
}]
},{
xtype:'panel',
layout:'column',
width:380,
items:[{
columnWidth:.76,
layout:'form',
labelWidth:70,
labelAlign:'right',
labelPad:10,
items:[{
xtype:'combo',
id:'deptCombo',
fieldLabel:'所属部门',
maxHeight:110,
anchor: '99%',
allowBlank:false,
blankText:'必须选择部门',
editable:false,//禁止编辑
hideTrigger:false,//隐藏后面的那个下拉图片按钮，这在只读模式下浏览数据有用
loadingText:'正在加载信息……',//加载信息时显示的提示信息
emptyText:'请选择部门',
typeAhead:true,//在输入时，是否把第一个匹配项自动选择到文本框中
forceSelection:true,//必须选择一项(强制)
hiddenField:'deptId',//隐藏必须的id
hiddenName:'dept.id',//hiddenName才是提交至后台的input的name
//name只是下拉列表的名称
triggerAction: "all",//单击触发按钮显示全部数据(不根据输入框中的数据进行过滤)
store:deptCombo_store,
mode:'remote',//remote数据从远程获取;local为本地数据
displayField: 'name',//要显示的字段
valueField: "id"//实际值字段
}]
},{
columnWidth:.24,
layout:'form',
items:[{
xtype:'button',
//text:'刷新',
iconCls:'icon-btn-refresh',
tooltip:'重新获取部门列表',
handler:function(){
deptCombo_store.reload();
}
}]
}]
},{
fieldLabel:'联系电话',
name:'user.phone',
allowBlank:false,
emptyText:'请输入联系电话',
regex:/^\d{3,4}-?\d{7,9}$/,
regexText:'请正确填写您的电话号码,格式如：<br/>010-123456'
},{
fieldLabel:'移动电话',
name:'user.tel',
regex:/^(((1[3-9]{1}[0-9]{1})|(15[0-9]{1}))+\d{8})$/,
regexText:'请输入有效的手机号'
},{
fieldLabel:'电子邮件',
name:'user.email',
vtype:'email'
},{
fieldLabel:'个人博客',
name:'user.url',
vtype:'url'
},{
xtype:'textarea',
fieldLabel:'联系地址',
height:40,
name:'user.address'
},{
xtype:'textarea',
fieldLabel:'备注',
height:40,
name:'user.description'
}]
}],
buttonAlign:'center',
minButtonWidth:60,
buttons:[{
text:'提交',
tooltip:'提交数据',
handler:function(){
var _userForm = Ext.getCmp('addOrModifyForm').getForm();
if(_userForm.isValid()){
_userForm.submit({
url:_url,
method:'POST',
waitTitle:'请稍候',
waitMsg:'正在提交数据，请稍候……',
success:function(form,action){
Ext.example.msg('提示','数据提交成功……','msg-box-success');
Ext.getCmp('addOrModifyWin').close();
user_grid.getStore().reload();
},
failure:function(form,action){
Ext.example.msg('警告',"原因：" + action.result.msg,'msg-box-error');
}
});
} else {
Ext.example.msg('警告','数据验证失败，请核对……','msg-box-error');
}
}
},{
text:'重置',
tooltip:'重置表单数据',
handler:function(){
Ext.getCmp('addOrModifyForm').getForm().reset();
}
},{
text:'取消',
handler:function(){
Ext.getCmp('addOrModifyWin').close();
//this.ownerCt.ownerCt.close();
}
}]
}).show();
if(_id){
var _userForm = Ext.getCmp('addOrModifyForm').getForm();
_userForm.reader = new Ext.data.JsonReader({
root:"user"
},[
{name:"user.id",type:"int",mapping:"id"},
{name:"user.name",type:"string",mapping:"name"},
{name:"user.username",type:"string",mapping:"username"},
{name:"user.password",type:"string",mapping:"password"},
{name:"user.sex",type:"boolean",mapping:"sex"},
{name:"user.phone",type:"string",mapping:"phone"},
{name:"user.tel",type:"string",mapping:"tel"},
{name:"user.url",type:"string",mapping:"url"},
{name:"user.email",type:"string",mapping:"email"},
{name:"dept.id",type:"int",mapping:"dept.id"},
//{name:"deptName",type:"string",mapping:"dept.name"},
{name:"user.address",type:"string",mapping:"address"},
{name:"user.description",type:"string",mapping:"description"}
]);
_userForm.load({
url:'user!findUserById',
waitMsg:'正在截入数据……',
params:{'user.id':_id},
success:function(form, action){
Ext.example.msg('提示','数据加载成功……','msg-box-success');
},
failure:function(form,action){
Ext.example.msg("警告","数据加载失败，请核对……","msg-box-error");
Ext.getCmp('addOrModifyWin').close();
}
});
}
}
var btn_add = new Ext.Button({
text:"添加",
tooltip:"添加一个新的用户记录",
id:"addUser",
iconCls:'icon-btn-add',
handler:function(){
Ext.example.msg("提示","你点击了添加用户按钮","");
new addOrModify('user!add');
}
});
var btn_modify = new Ext.Button({
text:"编辑",
tooltip:"编辑用户信息",
iconCls:'icon-btn-edit',
handler:function(){
var _selectModel = user_grid.getSelectionModel();
if(_selectModel.hasSelection()){
var _rec = _selectModel.getSelected();
new addOrModify('user!modify',_rec.get('id'));
} else {
Ext.example.msg("警告","编辑前请选择一条记录……","msg-box-error");
}
}
});
var btn_delete = new Ext.Button({
text:"删除",
tooltip:"删除选择的用户记录",
iconCls:'icon-btn-delete',
handler:function(){
var _selectModel = user_grid.getSelectionModel();
if(_selectModel.hasSelection()){
//var _rec = _selectModel.getSelected();
Ext.Msg.confirm('确认删除','你确定删除所有选择用户的记录吗？',function(_btn){
if(_btn == 'yes'){
var ids = [];
var _recs = _selectModel.getSelections();
for(var i = 0; i < _recs.length; i++){
ids[i] = _recs[i].get('id');
}
//alert(ids.join(','));
Ext.Ajax.request({
waitMsg:'正在删除数据，请稍候……',
url:'user!delete',
params:{ids:ids.join(',')},
success:function(action){
Ext.example.msg('提示','数据删除成功……','msg-box-success');
user_grid.getStore().reload();
},
failure:function(action){
Ext.example.msg('提示','数据删除失败，请核对 ……','msg-box-error');
}
});
}
});
//new addOrModify('user!modify',_rec.get('id'));
} else {
Ext.example.msg("警告","编辑前请选择一条记录……","msg-box-error");
}
}
});
var user_grid = new Ext.grid.GridPanel({
id:'userGridPanel',
loadMask:{msg:'数据正在加载中,请稍候……'},
region:'center',
columnLines:true,
cm:user_cm,
sm:_sm,
trackMouseOver:true,
frame:true,
autoExpandColumn:"description",
tbar:[btn_add,"-",btn_modify,"-",btn_delete],
store:user_store,
bbar:
new Ext.PagingToolbar({
store:user_store,
pageSize:20,
displayInfo:true,
displayMsg:"第 {0} - {1} 条 共 {2} 条",
emptyMsg:"没有记录"
})
});
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif";
Ext.QuickTips.init();
var viewPort = new Ext.Viewport({
layout : 'fit',
items : [user_grid]
});
user_store.load();
});