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