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(); });