var c1=new Ext.tree.TreeNode({
id:'c1',
text:'人员信息',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true,  //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="UserListGridPanel.jsp"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});

var c1=new Ext.tree.TreeNode({
id:'c1',
text:'人员信息',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true,  //自动载入UserListGridPanel.jsp页面，该页面含有JavaScript，不缓存
autoLoad:{url:'UserListGridPanel.jsp',scripts:true,nocache:true}
});
}
tab.setActiveTab(n);
}
}
});

UserListGridPanel = Ext.extend(Ext.grid.GridPanel,{
//初始化数据添加组件和数据修改组件
insertWin:new InsertUserInfoWindow(),
updateWin:new UpdateUserInfoWindow(),
constructor:function(){
//数据源
this['store'] = new Ext.data.Store({
url:UserListGridPanel.ACT_URL,
reader:new Ext.data.JsonReader({
root:'rows',
totalProperty:'count'
},
Ext.data.Record.create([
'UId','UName','UTrueName','UPassword'
]))
}),
UserListGridPanel.superclass.constructor.call(this,{
//将该列表渲染到网页的body中
renderTo:Ext.getBody(),
autoHeight:true,
bbar:new Ext.PagingToolbar({
pageSize:10,//每页数据大小
store:this.store
}),
width:300,
tbar:[{
text:'添加人员',
handler:function(){
this.insertWin.show();
},
scope:this
},'-',{
text:'修改人员',
handler:function(){
this.updateWin.show();
try{
this.updateWin.load(this.getSelected());
}catch(err){
Ext.Msg.alert('系统提示',err.description);
this.updateWin.close();
}
},
scope:this
},'-',{
text:'删除人员',
handler:function(){
Ext.Msg.confirm('警告','删除是不可逆的，是否确定删除？',function(btn){
if(btn == 'yes'){
this.remove();
}
},this);
},
scope:this
}],
//列模式
colModel:new Ext.grid.ColumnModel([{
align:'center',
header:'用户名',
dataIndex:'UName',
menuDisabled:true
},{
align:'center',
header:'真实姓名',
dataIndex:'UTrueName',
menuDisabled:true
},{
align:'center',
header:'密码',
dataIndex:'UPassword',
menuDisabled:true
}]),
loadMask:{msg:'数据加载中...'},
//选择模式
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true,//只可单选
listeners:{
'rowselect':{
fn:function(sel,index,r){
this.fireEvent('rowselect',r);
},
scope:this
}
}
})
});
//数据加载事件，向服务器递交查询参数，这里每次查询10条数据
this.getStore().load({params:{start:0,limit:10}});
this.insertWin.on('submit',this.onInsertWinSubmit,this);
this.updateWin.on('submit',this.onUpdateWinSubmit,this);
this.addEvents('rowselect');
},
getSelected:function(){
var sm = this.getSelectionModel();
if(sm.getCount() == 0)
throw Error('您尚未选中任何人员记录！');
return sm.getSelected();
},
insert:function(r){
this.getStore().add(r);
},
update:function(r){
//更改本地数据
var sr = this.getSelected();
for(var i in sr.data){
sr.set(i,r.get(i));
}
//提交更改
sr.commit();
},
//使用AJAX方式删除数据库及数据列表中的选中数据
remove:function(){
try{
var rc = this.getSelected();
Ext.Ajax.request({
url:'user.do?action=delUser',
params:rc.data
});
this.getStore().remove(rc);
}catch(err){
Ext.Msg.alert('警告',err.description);
}
},
onInsertWinSubmit:function(win,r){
//向列表中插入新数据
this.insert(r);
},
onUpdateWinSubmit:function(win,r){
//修改列表中选中的数据
this.update(r);
}
});

/*********************基础表单，作为新增、修改表单的父类*****************************/
UserInfoFormPanel = Ext.extend(Ext.form.FormPanel,{
constructor:function(cfg){
//将子类所传递的属性参数应用于父类
if(cfg != null){
Ext.apply(this,cfg);
}
UserInfoFormPanel.superclass.constructor.call(this,{
frame:true,//边框样式
autoHeight:true,//自适应高度
baseCls:'x-plain',//底色与父窗体相同
defaultType:'textfield',//默认类型为文本框
defaults:{allowBlank:false},//默认不允许任何栏位为空
labelWidth:55,//标签宽度
items:[{
inputType:'hidden',
name:'UId',
allowBlank:true
},{
fieldLabel:'用户名',
blankText:'用户名不能为空！',
name:'UName'
},{
fieldLabel:'真实姓名',
blankText:'真实姓名不能为空！',
name:'UTrueName'
},{
fieldLabel:'密码',
inputType:'password',
blankText:'密码不能为空！',
name:'UPassword'
}]
});
this.addEvents('submit');//声明事件
},
//具体事件操作
submit:function(){
if(this.url != ""){
if(this.getForm().isValid()){
//若表单栏位验证通过，则进行提交
this.getForm().submit({
url:this.url,
success:this.onSubmit,//若服务器返回提交成功提示，则调用onSubmit方法
waitTitle:'数据提交',
waitMsg:'数据提交中，请稍候...',
scope:this
});
}else{
Ext.Msg.alert('提示','表单验证失败！');
}
}
},
//获取表单数据方法
getValues:function(){
if(this.getForm().isValid()){
return new Ext.data.Record(this.getForm().getValues());
}else{
throw Error('表单验证失败！');
}
},
//表单数据载入方法
setValues:function(r){
this.getForm().loadRecord(r);
},
//表单重置方法
reset:function(){
this.getForm().reset();
},
//触发声明的事件并传递相关参数
onSubmit:function(form,action){
this.fireEvent('submit',this,action,this.getValues());
}
});
/********************将表单置于窗口中***********************/
UserInfoWindow = Ext.extend(Ext.Window,{
form:null,
url:'',
constructor:function(cfg){
Ext.apply(this,cfg);
//带参构造
this.form = new UserInfoFormPanel({url:this.url});
UserInfoWindow.superclass.constructor.call(this,{
plain:true,
autoHeight:true,
width:250,
items:this.form,
buttonAlign:'center',
closeAction:'hide',
modal:true,
buttons:[{
text:'确定',
handler:this.onSubmitClick,
scope:this
},{
text:'取消',
handler:this.onCancelClick,
scope:this
}]
});
//声明事件
this.addEvents('submit');
//当触发submit事件后执行onSubmit
this.form.on('submit',this.onSubmit,this);
},
//窗口关闭
close:function(){
this.form.reset();
this.hide();
},
//提交表单
onSubmitClick:function(){
this.form.submit();
},
//取消操作
onCancelClick:function(){
this.close();
},
//触发submit事件并传递相关参数
onSubmit:function(form,action,values){
try{
this.fireEvent('submit',this,values);
}catch(err){
return;
}
this.close();
}
});
/*********************数据添加窗口*************************/
InsertUserInfoWindow = Ext.extend(UserInfoWindow,{
//窗口标题
title:'添加人员',
url:'user.do?action=addUser',
//重写父类的onSubmit方法，用于将新增数据的id与该数据作为一条记录添加进GridPanel。
onSubmit:function(form,action,values){
var data = values.data;
Ext.apply(data,{id:action.result.id});
try{
this.fireEvent('submit',this,new Ext.data.Record(data));
}catch(err){
Ext.Msg.alert('提示',err.description);
return;
}
this.close();
}
});
/*********************数据修改窗口**********************/
UpdateUserInfoWindow = Ext.extend(UserInfoWindow,{
title:'修改人员',
url:'user.do?action=updateUser',
//载入GridPanel中选中的数据
load:function(r){
this.form.setValues(r);
}
});
/********************用于显示数据列表*************************/
UserListGridPanel = Ext.extend(Ext.grid.GridPanel,{
//初始化数据添加组件和数据修改组件
insertWin:new InsertUserInfoWindow(),
updateWin:new UpdateUserInfoWindow(),
constructor:function(){
UserListGridPanel.superclass.constructor.call(this,{
//将该列表渲染到网页的body中
renderTo:Ext.getBody(),
autoHeight:true,
width:300,
tbar:[{
text:'添加人员',
handler:function(){
this.insertWin.show();
},
scope:this
},'-',{
text:'修改人员',
handler:function(){
this.updateWin.show();
try{
this.updateWin.load(this.getSelected());
}catch(err){
Ext.Msg.alert('系统提示',err.description);
this.updateWin.close();
}
},
scope:this
},'-',{
text:'删除人员',
handler:function(){
Ext.Msg.confirm('警告','删除是不可逆的，是否确定删除？',function(btn){
if(btn == 'yes'){
this.remove();
}
},this);
},
scope:this
}],
//列模式
colModel:new Ext.grid.ColumnModel([{
align:'center',
header:'用户名',
dataIndex:'UName',
menuDisabled:true
},{
align:'center',
header:'真实姓名',
dataIndex:'UTrueName',
menuDisabled:true
},{
align:'center',
header:'密码',
dataIndex:'UPassword',
menuDisabled:true
}]),
//数据源，此处使用的是Json数据源
store:new Ext.data.JsonStore({
autoLoad:true,
proxy:new Ext.data.HttpProxy({//使用代理获取服务器上的数据
url:UserListGridPanel.ACT_URL
}),
fields:['UId','UName','UTrueName','UPassword']
}),
loadMask:{msg:'数据加载中...'},
//选择模式
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true,//只可单选
listeners:{
'rowselect':{
fn:function(sel,index,r){
this.fireEvent('rowselect',r);
},
scope:this
}
}
})
});
this.insertWin.on('submit',this.onInsertWinSubmit,this);
this.updateWin.on('submit',this.onUpdateWinSubmit,this);
this.addEvents('rowselect');
},
getSelected:function(){
var sm = this.getSelectionModel();
if(sm.getCount() == 0)
throw Error('您尚未选中任何人员记录！');
return sm.getSelected();
},
insert:function(r){
this.getStore().add(r);
},
update:function(r){
//更改本地数据
var sr = this.getSelected();
for(var i in sr.data){
sr.set(i,r.get(i));
}
//提交更改
sr.commit();
},
//使用AJAX方式删除数据库及数据列表中的选中数据
remove:function(){
try{
var rc = this.getSelected();
Ext.Ajax.request({
url:'user.do?action=delUser',
params:rc.data
});
this.getStore().remove(rc);
}catch(err){
Ext.Msg.alert('警告',err.description);
}
},
onInsertWinSubmit:function(win,r){
//向列表中插入新数据
this.insert(r);
},
onUpdateWinSubmit:function(win,r){
//修改列表中选中的数据
this.update(r);
}
});
//将与服务器交互的URL提取出来，方便后期维护
UserListGridPanel.ACT_URL ='user.do?action=getList';

UserInfoFormPanel = Ext.extend(Ext.form.FormPanel,{
constructor:function(){
UserInfoFormPanel.superclass.constructor.call(this,{
frame:true,
autoHeight:true,
baseCls:'x-plain',
defaultType:'textfield',
defaults:{allowBlank:false},
labelWidth:55,
items:[{
fieldLabel:'用户名',
blankText:'用户名不能为空！',
name:'UName'
},{
fieldLabel:'真实姓名',
blankText:'真实姓名不能为空！',
name:'UTrueName'
},{
fieldLabel:'密码',
blankText:'密码不能为空！',
name:'UPassword'
}]
});
},
getValues:function(){
return new Ext.data.Record(this.getForm().getValues());
},
setValues:function(r){
this.getForm().loadRecord(r);
},
reset:function(){
this.getForm().reset();
}
});
/****************************************************************************/
UserInfoWindow = Ext.extend(Ext.Window,{
form:null,
constructor:function(){
this.form = new UserInfoFormPanel();
UserInfoWindow.superclass.constructor.call(this,{
renderTo:Ext.getBody(),
plain:true,
autoHeight:true,
width:250,
items:this.form,
buttonAlign:'center',
closeAction:'hide',
modal: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(){
this.fireEvent('submit',this,this.form.getValues());
this.close();
},
onCancelClick:function(){
this.close();
}
});
/****************************************************************************/
InsertUserInfoWindow = Ext.extend(UserInfoWindow,{
title:'添加人员'
});
/****************************************************************************/
UpdateUserInfoWindow = Ext.extend(UserInfoWindow,{
title:'修改人员',
load:function(r){
this.form.setValues(r);
}
});
/****************************************************************************/
UserListGridPanel = Ext.extend(Ext.grid.GridPanel,{
insertWin:new InsertUserInfoWindow(),
updateWin:new UpdateUserInfoWindow(),
constructor:function(){
UserListGridPanel.superclass.constructor.call(this,{
renderTo:Ext.getBody(),
width:300,
autoHeight:true,
autoWidth:true,
tbar:[{
text:'添加人员',
handler:function(){
this.insertWin.show();
},
scope:this
},'-',{
text:'修改人员',
handler:function(){
this.updateWin.show();
try{
this.updateWin.load(this.getSelected());
}catch(err){
Ext.Msg.alert('系统提示',err.description);
this.updateWin.close();
}
},
scope:this
},'-',{
text:'删除人员',
handler:function(){
Ext.Msg.confirm('警告','删除是不可逆的，是否确定删除？',function(btn){
if(btn == 'yes'){
this.remove();
}
},this);
},
scope:this
}],
//列模式
colModel:new Ext.grid.ColumnModel([{
align:'center',
header:'用户名',
dataIndex:'UName',
menuDisabled:true
},{
align:'center',
header:'真实姓名',
dataIndex:'UTrueName',
menuDisabled:true
},{
align:'center',
header:'密码',
dataIndex:'UPassword',
menuDisabled:true
}]),
//数据源，此处使用的是Json数据源
store:new Ext.data.JsonStore({
autoLoad:true,
proxy:new Ext.data.HttpProxy({//使用代理获取服务器上的数据
url:UserListGridPanel.DATA_URL
}),
fields:['UId','UName','UTrueName','UPassword']
}),
//选择模式
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true,//只可单选
listeners:{
'rowselect':{
fn:function(sel,index,r){
this.fireEvent('rowselect',r);
},
scope:this
}
}
})
});
this.insertWin.on('submit',this.onInsertWinSubmit,this);
this.updateWin.on('submit',this.onUpdateWinSubmit,this);
this.addEvents('rowselect');
},
getSelected:function(){
var sm = this.getSelectionModel();
if(sm.getCount() == 0)
throw Error('您尚未选中任何人员记录！');
return sm.getSelected();
},
insert:function(r){
this.getStore().add(r);
},
update:function(r){
var sr = this.getSelected();
for(var i in sr.data){
sr.set(i,r.get(i));
}
sr.commit();
},
remove:function(){
try{
this.getStore().remove(this.getSelected());
}catch(err){
Ext.Msg.alert('警告',err.description);
}
},
onInsertWinSubmit:function(win,r){
this.getStore().add(r);
},
onUpdateWinSubmit:function(win,r){
this.update(r);
}
});
UserListGridPanel.DATA_URL ='user.do?action=getList';