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" name="code">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();});?
?