Extjs3.x Struts2 -Json-plugin学习实例 -Dept管理页面 06
dept_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>
<link rel="stylesheet" type="text/css" href="extjs/examples.css" />
<script type="text/javascript" src="extjs/examples.js"></script>
<script type="text/javascript" src="dept.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="dept"></div>
<div id="topic-win" class="x-hidden">
</body>
</html>
dept.js文件
var _reader = new Ext.data.JsonReader({
totalProperty:"totalProperty",
root:'depts'
},[
{name:"id",type:"int",mapping:"id"},
{name:"name",type:"string",mapping:"name"},
{name:"description",type:"string",mapping:"description"}
]);
var _store = new Ext.data.Store({
baseParams:{//起始参数，一般是表示分页的参数
start:0,
limit:20
},
sortInfo:{//数据排序的方式
field:"id",
direction:"asc"
},
//autoLoad:true,//是否自动加载数据
remoteSort:true,
reader:_reader,
proxy:new Ext.data.HttpProxy({
url:"dept.action",
method:"POST"
})
});
var _sm = new Ext.grid.CheckboxSelectionModel();//创建带复选框的选择模型
//列模型
var _cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//在第一列显示固定不动的行
_sm,
{header:"编号", width:40,dataIndex:"id"},
{header:"部门名称", width:150,dataIndex:"name"},
{header:"描述", dataIndex:"description",id:"description"}
]);
var addOrModifyFn = function(_url, _id){
new Ext.Window({
id:"addOrModifyWin",
//iconCls:xxx,
title:'添加部门',
width:400,
height:135,
resizable:false,//不可以调整大小
modal:true,//设置此Window为模式窗口,
animateTarget:'addDept',//当指定一个id或元素,window打开时会与元素之间产生动画效果
closeAction:'close',
listeners:{
'show':function(){
btn_add.disable();//当窗口显示时，则添加按钮不可用
},
'close':function(){
btn_add.enable();//当宣传品关闭时，则添加按钮可用
}
},
items:[{
xtype:"form",
labelWidth:75,
id:"deptForm",
//url:"dept.action",
frame:true,
//title:"添加部门",
bodyStyle:"padding:5px 5px 0",
border:false,
waitMsgTarget:true,//true的意思是说表单提交时的等待信息在这个表单之内显示，而不是弹出框(进度条形式的)
labelAlign:"right",
labelPad : 10,// 标签与字段录入框之间的空白
//reader:_reader,
//anchor: '100%',
defaults:{width:230},
defaultType:"textfield",
items:[{
xtype:"hidden",
name:"dept.id",
value:0
},{
fieldLabel:"部门名称",
name:"dept.name",
allowBlank:false,
emptyText:"输入部门名称……"
},{
fieldLabel:"描 述",
name:"dept.description",
allowBlank:false
}]
}],
buttonAlign:'center',
minButtonWidth:60,
buttons:[{
text:"提交",
tooltip:"提交数据",
handler:function(){
if(Ext.getCmp("deptForm").getForm().isValid()){//对表单进行验证(根据配置的项进行配置)
Ext.getCmp("deptForm").getForm().submit({//利用表单的submit方法提交表单
waitTitle:"请稍候", //提交表单时进度条的标题
waitMsg:"正在提交数据，稍后……", //提交表单时进度条的信息
url:_url, //提交地址
method:"POST", //提交方式，需要大写
success:function(form, action){ //如果提交成功后处理的方法
/*
Ext.Msg.alert("提交成功", "提交部门信息成功……",function(){
Ext.getCmp("addOrModifyWin").close();
_grid.getStore().reload();
});
*/
Ext.example.msg("提交成功", "提交部门信息成功……","msg-box-success");//相应的提示信息
Ext.getCmp("addOrModifyWin").close(); //根据id获取到表单的窗口，然后将其关闭
_grid.getStore().reload(); //提交成功后，需要刷新GridPanel数据，
//但效率时会将提交表单中的数据直接添加或更新到GridPanel中
},
failure:function(form,action){ //提交指失败进处理的方法
Ext.example.msg("警告","数据提交失败，请核对……","msg-box-error");
}
});
} else {//如果表单验证未通过则提示用户骓未通过。
Ext.example.msg("提示","请填写完整、合法的部门信息……","msg-box-error");
}
}
},{
text:"取消",
tooltip:"取消此操作",
handler:function(){
Ext.getCmp("addOrModifyWin").close();//取消实际上就是关闭窗口
}
}]
}).show();
if(_id){
var _form = Ext.getCmp("deptForm").getForm();
_form.reader = new Ext.data.JsonReader({
root:'dept'
},[
{name:"dept.id",type:"int",mapping:"id"},
{name:"dept.name",type:"string",mapping:"name"},
{name:"dept.description",type:"string",mapping:"description"}
]);
_form.load({url:"dept!findDeptById?dept.id=" + _id,
waitMsg: '正在载入数据...',
success:function(form, action){
Ext.example.msg("提示","数据加载成功……","msg-box-success");
},
failure:function(){
Ext.example.msg("异常","数据加载失败……","msg-box-error");
Ext.getCmp("addOrModifyWin").close();
}
});
}
}
var btn_add = new Ext.Button({
text:"添加",
tooltip:"添加部门",
id:"addDept",
iconCls:'icon-btn-add',
handler:function(){
new addOrModifyFn('dept!add');
}
});
var btn_modify = new Ext.Button({
text:'编辑',
tooltip:'编辑部门信息',
iconCls:'icon-btn-edit',
handler:function(){
var _selectModel = _grid.getSelectionModel();
if(_selectModel.hasSelection()){
//Ext.example.msg("选择了","你选择了数据行","");
var _rec = _selectModel.getSelected();
new addOrModifyFn('dept!modify',_rec.get('id'));
} else {
Ext.example.msg("警告","编辑前请选择一条记录……","msg-box-error");
}
}
});
var _grid = new Ext.grid.GridPanel({
id:"deptGridPnael",
iconCls:"icon-grid",
loadMask : {msg : '数据正在加载中，请稍候...'},//表示为当grid加载过程中，会有一个Ext.LoadMask的遮罩效果
//title:"部门管理",
region:"center",//表示区域
//autoWidth:true,
//autoHeight:true,
columnLines:true,//True表示为在列分隔处显示分隔符
cm:_cm,
sm:_sm,
enableColumnMove:false,//列不可拖动
trackMouseOver:true,//是给Grid实现鼠标在行经过时的轨迹效果
frame:true,
store:_store,
//renderTo:"dept",
autoExpandColumn:"description",
tbar:[btn_add,"-",btn_modify],
bbar:
new Ext.PagingToolbar({
store:_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 : [_grid]
});
_store.load();
});