ext3,Struts2增删改查(锁列)

技术2022-05-19 20

这几天总算在SSH2框架中做了个完整的Ext增删改查的例子，还包括锁列。本文将在框架没有问题的情况下简述其实现：

先贴上jsp页面吧：

<%@ page contentType="text/html; charset=utf-8" language="java" %> <%@ taglib prefix="s" uri="/struts-tags"%> <% String path = request.getContextPath(); response.setHeader("Pragma","No-cache");//HTTP 1.1 response.setHeader("Cache-Control","no-cache");//HTTP 1.0 response.setHeader("Expires","0");// 防止被proxy %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>专家管理</title> <link rel="stylesheet" type="text/css" href="<%=path %>/js/ext3.2.1/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="<%=path %>/js/ext3.2.1/examples/ux/css/LockingGridView.css" /> <mce:script type="text/javascript" src="<%=path %></mce:script> <mce:script type="text/javascript" src="<%=path %></mce:script> <link rel="stylesheet" type="text/css" href="<%=path %>/test/examples.css" /> <link rel="stylesheet" type="text/css" href="<%=path %>/test/style.css" /> <link rel="stylesheet" type="text/css" href="<%=path %>/test/yanyuan.css" /> <mce:script type="text/javascript" src="<%=path %></mce:script> <mce:script type="text/javascript" src="<%=path %></mce:script> <mce:script type="text/javascript" src="<%=path %></mce:script> </head> <body> <table> <TR> <TD class="tab_title"> <img src="../images/pic_row_begin.gif" mce_src="images/pic_row_begin.gif" align="absmiddle"> <SPAN class="article_subhead">专家信息列表</SPAN></TD> </TR> <tr> <td id="tab_list" class="tab_1"></td> </tr> </table> </body> </html>

jsp上没什么东西，关键是下面的demo.js

/** * author : zengwei * date:2011-02-15 * */ function checkall(){ var aa=document.getElementsByName("ids"); for(var i=0;i<aa.length;i++){ if(aa[i].checked == true){ aa[i].checked=false; }else{ aa[i].checked=true; } } } Ext.data.Store.prototype.applySort = function() { if (this.sortInfo && !this.remoteSort) { var s = this.sortInfo, f = s.field; var st = this.fields.get(f).sortType; var fn = function(r1, r2) { var v1 = st(r1.data[f]), v2 = st(r2.data[f]); if (typeof(v1) == "string") { return v1.localeCompare(v2); } return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0); }; this.data.sort(s.direction, fn); if(this.snapshot && this.snapshot != this.data) { this.snapshot.sort(s.direction, fn); } } }; Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '<%=path %>/js/ext/resources/images/default/s.gif'; Ext.QuickTips.init(); var xg = Ext.grid; //这里就是设置解析格式的地方，一定要和你的Model一样，要不然可是什么都得不到哦~~~~ var rd = new Ext.data.JsonReader({ //总记录数 totalProperty: 'totalCount', //哪儿是数据的头，可以看action里面是怎么定义数据格式的，这里就是如何解析的 root: 'results'}, //有那些字段呢？ [ //{name:'id',type: 'string'}, {name:'id',type: 'string'}, {name:'name',type: 'string'}, {name:'sex',type: 'string'}, {name:'phone',type: 'string'}, {name:'email',type: 'string'}, {name:'deptName',type: 'string'} //这里就是对custom对象进行映射的地方 //{name:'customId' ,mapping:'custom.customId'}, //{name:'customName',mapping:'custom.customName'} ] ); var Store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: '../expert/extDemo.action',method:'POST'}),//Url很关键，我就是因为没配好这个，POST方法很重要，你可以省略，让你看下错误也行的！耽误了一大堆时间！ reader:rd }); var ds_dept_select = new Ext.data.Store({ url : 'findDeptByCompany.action', reader : new Ext.data.JsonReader({root : 'root'}, [{name : 'deptId'}, {name : 'deptName'}]) }); //CheckBox选择列 //var sm = new Ext.grid.CheckboxSelectionModel(); var sm = new Ext.grid.CheckboxSelectionModel({ header: "", //width:30, handleMouseDown: function(g, rowIndex, e) { if (e.button !== 0 || this.isLocked()) { return; } var view = this.grid.getView(); if (e.shiftKey && !this.singleSelect && this.last !== false) { var last = this.last; this.selectRange(last, rowIndex, e.ctrlKey); this.last = last; view.focusRow(rowIndex); } else { var isSelected = this.isSelected(rowIndex); if (isSelected) { this.deselectRow(rowIndex); } else if (!isSelected || this.getCount() > 1) { this.selectRow(rowIndex, true); view.focusRow(rowIndex); } } }, isLocked: Ext.emptyFn, initEvents: function() { Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this); this.grid.on('render', function() { var view = this.grid.getView(); view.mainBody.on('mousedown', this.onMouseDown, this); Ext.fly(view.lockedInnerHd).on('mousedown', this.onHdMouseDown, this); }, this); } }); sm.locked = true; var cm =new Ext.ux.grid.LockingColumnModel([ //new Ext.grid.RowNumberer(), //行号列 sm, //{header: '<input type="checkbox" οnclick="javascript:checkall()">',width: 40,locked:true}, {header: "姓名",width: 160,sortable: true, dataIndex: 'name'}, {header:"性别",width: 160,sortable: true,dataIndex:'sex'}, {header: "电话",width: 160,sortable: true, dataIndex: 'phone'}, {header: "Email",width: 160,sortable: true, dataIndex: 'email'}, {header: "部门",width: 160,sortable: true, dataIndex: 'deptName'} ]); ///cm.defaultSortable = true; // OrderGrid if(Ext.grid.GridView){ Ext.apply(Ext.grid.GridView.prototype, { sortAscText : "升序", sortDescText : "降序", lockText : "锁列", unlockText : "解锁列", columnsText : "列" }); }; var addOrModifyFn = function(_url, _id){ //Ext.Msg.alert("提示",_id); new Ext.Window({ id:"addOrModifyWin", //iconCls:xxx, title:'添加|修改专家信息', width:400, height:210, resizable:false,//不可以调整大小 modal:true,//设置此Window为模式窗口, animateTarget:'addExpert',//当指定一个id或元素,window打开时会与元素之间产生动画效果 closeAction:'close', listeners:{ 'show':function(){ btn_add.disable();//当窗口显示时，则添加按钮不可用 }, 'close':function(){ btn_add.enable();//当宣传品关闭时，则添加按钮可用 } }, items:[{ xtype:"form", labelWidth:75, id:"expertForm", //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:"expert.id", value:0 },{ fieldLabel:"姓名", name:"expert.name", allowBlank:false, emptyText:"输入专家姓名……" },{ fieldLabel:"性别", name:"expert.sex", allowBlank:false, emptyText:"输入专家性别……" },{ fieldLabel:"电话", name:"expert.phone", allowBlank:false, emptyText:"输入专家电话……" },{ fieldLabel:"Email", name:"expert.email", allowBlank:false, emptyText:"输入专家邮箱……" },{ fieldLabel:"部门", name:"expert.department" //allowBlank:false }] }], buttonAlign:'center', minButtonWidth:60, buttons:[{ text:"提交", tooltip:"提交数据", handler:function(){ if(Ext.getCmp("expertForm").getForm().isValid()){//对表单进行验证(根据配置的项进行配置) Ext.getCmp("expertForm").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"); //Ext.Msg.alert(action.result.totalCount); } }); } else {//如果表单验证未通过则提示用户骓未通过。 Ext.example.msg("提示","请填写完整、合法的部门信息……","msg-box-error"); } } },{ text:"取消", tooltip:"取消此操作", handler:function(){ Ext.getCmp("addOrModifyWin").close();//取消实际上就是关闭窗口 } }] }).show(); if(_id){ var _form = Ext.getCmp("expertForm").getForm(); _form.reader = new Ext.data.JsonReader({ root:'results' },[ {name:"expert.id",type:"int",mapping:"id"}, {name:"expert.name",type:"string",mapping:"name"}, {name:"expert.sex",type:"string",mapping:"sex"}, {name:"expert.phone",type:"int",mapping:"phone"}, {name:"expert.email",type:"string",mapping:"email"}, {name:"expert.department",type:"string",mapping:"department"} ]); _form.load({url:"extEdit.action?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 _search_win = ; var _search = function(){ var _window = new Ext.Window({ title:"查询专家", id:'_searchWin', width:250, height:160, layout:"form", labelWidth:45, plain:true, bodyStyle:"padding:5px", items:[ {xtype:"textfield", fieldLabel:"姓名"}, //{xtype:"textfield", fieldLabel:"性别"}, {xtype : 'combo', fieldLabel : '性别', width:120, mode : 'local', name : 'expert.sex', editable : false, store : new Ext.data.SimpleStore({ data : [['男', '男'], ['女', '女']], fields : ['text', 'value'] }), displayField : 'text', valueField : 'value', mode : 'local', triggerAction : 'all', emptyText : '请选择性别' }, //{xtype:"textfield", fieldLabel:"部门"}, { xtype : 'combo', fieldLabel : '部门', id : 'dept', hiddenName : 'user.deptId', valueField : 'deptId', displayField : 'deptName', mode : 'remote', store : ds_dept_select, selectOnFocus : true, editable : false, allowBlank : false, triggerAction : 'all', loadingText : '加载中...', emptyText : '部门名称', listeners : { 'select' : function(combo, record, index) { this.ownerCt.form.findField('user.deptName').setValue(record.data.deptName); }, 'beforequery' : function(queryEvent) { if (!this.ownerCt.form.findField('user.companyId').getValue()) { queryEvent.cancel = true; } } } } ], buttons:[ { text:"提交", //scope: _window, handler:function(){ var _items = this.ownerCt.ownerCt.items; var temp = ""; temp += "name:" + _items.first().getValue(); temp += ",sex:" + _items.itemAt(1).getValue(); temp += ",department:" + _items.itemAt(2).getValue(); Store.baseParams.conditions = temp; Store.load({ params : { start : 0, limit : 4 } }); Ext.getCmp("_searchWin").close(); } } ] }); _window.show(); }; var btn_add = new Ext.Button({ text:"添加", tooltip:"添加专家", id:"addExpert", iconCls:'icon-btn-add', handler:function(){ //new addOrModifyFn('dept!add'); new addOrModifyFn('extAdd.action'); } }); var btn_search = new Ext.Button({ text:"查找", tooltip:"查找专家", id:"searchExpert", iconCls:'icon-btn-search', handler:function(){ //new addOrModifyFn('dept!add'); new _search(); } }); var btn_modify = new Ext.Button({ text:'编辑', tooltip:'编辑专家信息', iconCls:'icon-btn-edit', handler:function(){ var _selectModel = _grid.getSelectionModel(); var _count = _selectModel.getCount(); if(_selectModel.hasSelection()&&_count==1){ //Ext.example.msg("选择了","你选择了数据行",""); var _rec = _selectModel.getSelected(); new addOrModifyFn('extAdd.action',_rec.get('id')); } else if(_count>1){ Ext.Msg.alert('提示', '<font color=red>您只能选一条记录！</font>'); } else { Ext.example.msg("警告","编辑前请选择一条记录……","msg-box-error"); } } }); var btn_delete = new Ext.Button({ text:'删除', tooltip:'删除专家', iconCls:'icon-btn-delete', handler:function(){ var _selectModel = _grid.getSelectionModel(); var _count = _selectModel.getCount(); if(_selectModel.hasSelection()&&_count==1){ //Ext.example.msg("选择了","你选择了数据行",""); var _rec = _selectModel.getSelected(); var _id = _rec.get('id'); Ext.Msg.confirm('确认', '真的要删除此信息吗？', function(btn){ if (btn == 'yes'){ //alert(btn); Ext.Ajax.request({ url: 'extDel.action?id='+_id, success:function(){ Ext.Msg.alert('Result', '删除成功！'); _grid.getStore().reload(); }, failure:function(){ Ext.Msg.alert('Result', '删除失败！'); //Ext.getCmp("addOrModifyWin").close(); }, params:{id:id} }); } }); //new _delete('extDel.action',_rec.get('id')); } else if(_count>1){ Ext.Msg.alert('提示', '<font color=red>您只能选一条记录！</font>'); } else { Ext.example.msg("警告","编辑前请选择一条记录……","msg-box-error"); } } }); var _grid = new xg.GridPanel({ store: Store, sm: sm, cm: cm, //loadMask:true, loadMask: {msg:'正在加载数据，请稍侯……'}, width:800, height:400, //align:center, //region:'center', //frame:true,//外边框 //title:'专家列表', //iconCls:'icon-grid', renderTo: "tab_list", tbar:[btn_add,"-",btn_modify,"-",btn_delete,"-",btn_search], bbar:new Ext.PagingToolbar({ pageSize:4, store:Store, displayInfo:true, displayMsg:'显示第{0}数据到{1},一共有{2}条', emptyMsg:'没有记录' }), view: new Ext.ux.grid.LockingGridView() }); _grid.render(); Store.load({params:{start:0,limit:4}}); });

看下效果^_^

锁列

添加或修改

删除

查询

支持分页，在当前页修改后可自动刷新纪录，回到当前页。唯一有些缺憾的地方是复选框的锁列，不能自己控制列宽度，有些不好看了。呵呵……

专利

最新回复(0)