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();
});
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
