struts2+spring2.5+hibernate3+Extjs3实现的简单人员管理
我是初学Extjs,有很多不是很懂,在做这个小例子时随然能跑起来了,但是在数据添加删除修改之后又会自动更新,有时在重新reload store完成时,页面数据仍然处于原来状态。这有点小郁闷,希望大家能给指出错误,共同探讨Extjs.其中Extjs代码时经过封装过的,但不知道这样封转好不好,有封转好的专业代码希望大家给共享一些谢谢!
以下是程序代码:
/*各种显示Panel*/ Ext.ns("com.extjs.view"); /** * 分页条 */ com.extjs.view.Pagin = Ext.extend(Ext.PagingToolbar, { constructor:function(config) { Ext.apply(this, config); com.extjs.view.Pagin.superclass.constructor.call(this, { displayInfo:true, displayMsg:"显示从第{0}条到第{1}条的记录, 一共{2}条记录.", emptyText:"没有记录" }); } }); /** * Form */ com.extjs.view.PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, { constructor:function() { com.extjs.view.PersonInfoFormPanel.superclass.constructor.call(this, { //autoWidth:true, autoHeight:true, width:400, labelWidth:60, labelAlign:"right", buttonAlign:"center", frame:true, fileUpload:true, border:false, items:[{ layout:"column", items:[{ columnWidth:.4, layout:"form", defaults:{ anchor:"100%" }, items:[{ xtype:"hidden", name:"id" },{ fieldLabel:"名称", xtype:"textfield", name:"name", allowBlank:false }, { fieldLabel:"性别", defaultType:"radio", layout:"column", items:[{ boxLabel:"男", inputValue:"男", name:"sex", checked:true }, { boxLabel:"女", inputValue:"女", name:"sex" }] }, { fieldLabel:"出生日期", xtype:"datefield", name:"date", editable:false, format:"Y-m-d" }, { fieldLabel:"联系方式", xtype:"textfield", name:"tel" }] }, { columnWidth:.6, layout:"form", defaults:{ anchor:"90%" }, defaultType:"textfield", items:[{ fieldLabel:"个人图片", xtype:"box", name:"pho", width:100, height:110, autoEl:{ src:"images/2.jpg", tag:"img" } }, { fieldLabel:"上传图片", inputType:"file", name:"file" }] }] }, { fieldLabel:"备注", xtype:"textarea", name:"remark", anchor:"95%" }] }); }, getValues:function() { if(this.getForm().isValid()) { return new Ext.data.Record(this.getForm().getValues()); }else { throw new Error("表单数据没有通过验证"); } }, setValues:function(r) { this.getForm().loadRecord(r); }, reset:function() { this.getForm().reset(); } }); /** * Window */ com.extjs.view.PersonInfoWindow = Ext.extend(Ext.Window, { form:null, constructor:function() { this.form = new com.extjs.view.PersonInfoFormPanel(); com.extjs.view.PersonInfoWindow.superclass.constructor.call(this, { width:400, closeAction:"hide", items:this.form, modal:true, plain:true, buttons:[{ text:"确定", handler:this.onSubmitClick, scope:this }, { text:"取消", handler:this.onCancelClick, scope:this }] }); this.addEvents("submit"); }, close:function() { this.form.reset(); this.hide(); }, onSubmitClick:function(){ try { this.fireEvent("submit", this, this.form.getValues()) }catch(err) { Ext.Msg.alert("系统提示", err.description); return; } this.close(); }, onCancelClick:function() { this.close(); } }); /** * 新增窗口 */ com.extjs.view.AddPersonInfoWindow = Ext.extend(com.extjs.view.PersonInfoWindow, { title:"添加人员" }); /** * 修改窗口 */ com.extjs.view.UpdatePersonInfoWindow = Ext.extend(com.extjs.view.PersonInfoWindow, { title:"修改人员", load:function(r) { this.form.setValues(r); } }); /** * GridPanel */ com.extjs.view.PersonInfoGridPanel = Ext.extend(Ext.grid.GridPanel, { conn:new Ext.data.Connection(), insertWindow:new com.extjs.view.AddPersonInfoWindow(), updateWindow:new com.extjs.view.UpdatePersonInfoWindow(), constructor:function() { this.sm = new Ext.grid.CheckboxSelectionModel(); this.cm = new Ext.grid.ColumnModel([ this.sm, new Ext.grid.RowNumberer(), { header:"编号", dataIndex:"id", width:40 }, { header:"名称", dataIndex:"name", width:60 }, { header:"性别", dataIndex:"sex", width:40 }, { header:"出生日期", dataIndex:"date", width:80 }, { header:"联系方式", dataIndex:"tel", width:100 }, { header:"备注", dataIndex:"remark", width:200 }]); this.store = new Ext.data.Store({ proxy:new Ext.data.HttpProxy({url:'http://localhost/personManager_extjs/person/personAction_findByPM.action'}), reader:new Ext.data.JsonReader({ totalProperty:"totalProperty", root:"root" },[{ name:"id" }, { name:"name" }, { name:"sex" }, { name:"date" }, { name:"tel" }, { name:"remark" }]) }); this.store.load({params:{start:0, limit:3}}); this.bbar = new com.extjs.view.Pagin({ store:this.store, pageSize:10 }); com.extjs.view.PersonInfoGridPanel.superclass.constructor.call(this, { id:"grid", store:this.store, cm:this.cm, sm:this.sm, autoHeight:true, pageSize:10, loadMask:true, viewConfig:{ forceFit:true }, bbar:this.bbar, tbar:["-",{ text:"新增", handler:function() { this.insertWindow.show(); }, scope:this }, "-", { text:"修改", handler:function() { this.updateWindow.show(); try { this.updateWindow.load(this.getSelected()); }catch(err) { Ext.Msg.alert("系统提示", err.description); this.updateWindow.close(); } }, scope:this }, "-", { text:"删除", handler:function() { try { this.getDelSelected(); Ext.Msg.confirm("系统提示", "确定要删除此条记录吗?", this.onRemoveSubmit, this); }catch(err) { Ext.Msg.alert("系统提示", err.description); } }, scope:this }] }); this.insertWindow.on("submit", this.onInsertSubmit, this); this.updateWindow.on("submit", this.onUpdateSubmit, this); }, getSelected:function() { var sm = this.getSelectionModel(); if(sm.getCount() ==0) { throw new Error("请选择要修改的人员信息"); } else { if(sm.getCount() > 1) { throw new Error("一次只能修改一条记录"); } } return sm.getSelected(); }, getDelSelected:function() { var sm = this.getSelectionModel(); if(sm.getCount() ==0) { throw new Error("请选择要删除的人员信息"); } return sm.getSelections(); }, insert:function(r) { this.conn.request({ url:"http://localhost/personManager_extjs/person/personAction_addPerson.action", params:{name:r.get("name"),sex:r.get("sex"),date:r.get("date"),tel:r.get("tel"),remark:r.get("remark")}, success:function(data) { var msg = eval("["+data.responseText+ "]"); Ext.Msg.alert("系统提示", msg[0].msg); }, failure:function() { Ext.Msg.alert("系统提示", "插入失败"); } }); this.getStore().reload(); }, update:function(r) { try { this.conn.request({ url:"http://localhost/personManager_extjs/person/personAction_updatePerson.action", params:{id:r.get("id"),name:r.get("name"),sex:r.get("sex"),date:r.get("date"),tel:r.get("tel"),remark:r.get("remark")}, success:function(data) { var msg = eval("["+data.responseText+"]"); Ext.Msg.alert("系统提示", msg[0].msg); }, failure:function() { Ext.Msg.alert("系统提示", "修改失败"); } }); }catch(err) { Ext.Msg.alert("系统提示", err.description); } this.getStore().reload(); }, remove:function() { try { var ids = new Array(); var length = this.getDelSelected().length; for(var i=0; i<length; i++) { ids.push(this.getDelSelected()[i].get("id")); } this.conn.request({ url:"http://localhost/personManager_extjs/person/personAction_delPerson.action", params:{ids:ids}, success:function(data) { var msg = eval("["+data.responseText+"]"); Ext.Msg.alert("系统提示", msg[0].msg); }, failure:function() { Ext.Msg.alert("系统提示", "修改失败"); } }); }catch(err) { Ext.Msg.alert("系统提示", err.description); } this.getStore().reload(); }, onInsertSubmit:function(win, r) { this.insert(r); }, onUpdateSubmit:function(win, r) { this.update(r); }, onRemoveSubmit:function(btn) { if(btn == "yes") { this.remove(); } } }); 下面是主页显示代码: /*主页面*/ Ext.ns("com.extjs.view"); /*菜单树*/ com.extjs.view.TreeMenu = Ext.extend(Ext.tree.TreePanel, { constructor:function() { this.root = new Ext.tree.AsyncTreeNode({ text:"菜单"//, //expanded:true }); this.loadder = new Ext.tree.TreeLoader({ dataUrl:"menu.txt" }); com.extjs.view.TreeMenu.superclass.constructor.call(this, { loader:this.loader, root:this.root, border:false }); } }); /*Viewport*/ com.extjs.view.MainViewport = Ext.extend(Ext.Viewport, { constructor:function() { this.tree = new com.extjs.view.TreeMenu(); this.form = new com.extjs.view.PersonInfoFormPanel(); this.grid = new com.extjs.view.PersonInfoGridPanel(); com.extjs.view.MainViewport.superclass.constructor.call(this, { layout:"border", items:[{ region:"north", html:"<div><img src='images/baner.jpg' style='width:100%;height:60'/></div>", height:60 }, { region:"west", items:[this.tree], width:200, collapsible:true, collapseMode:"mini", split:true, maxSize:210, minSize:190, title:"菜单" }, { region:"center", items:[this.grid] }] }); } }); /*初始化页面并显示*/ Ext.onReady(function() { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = "side"; new com.extjs.view.MainViewport(); });