ExtGridPanel数据库增删改查完整版.docx
- 文档编号:8852901
- 上传时间:2023-02-02
- 格式:DOCX
- 页数:10
- 大小:16.77KB
ExtGridPanel数据库增删改查完整版.docx
《ExtGridPanel数据库增删改查完整版.docx》由会员分享,可在线阅读,更多相关《ExtGridPanel数据库增删改查完整版.docx(10页珍藏版)》请在冰豆网上搜索。
ExtGridPanel数据库增删改查完整版
ExtGridPanel数据库增删改查完整版
ExtGridPanel数据库增删改查完整版
2009.02.20/标签:
ajax/分类:
ExtJSNeeke
O(∩_∩)O哈哈~终于搞定了,昨天的那些错误也不知道什么原因,后面写着写着就又好了。
而且昨天那个仅仅只是读取了数据库的数据,今天这个加上了对数据库的增删改,目前尚未发现任何BUG,加上了不是很详细的注释O(∩_∩)O~,现在这个算是最终的完整版了,今后要实现其他的功能就只需要照着这个来扩充了。
/*********************基础表单,作为新增、修改表单的父类*****************************/
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()){
returnnewExt.data.Record(this.getForm().getValues());
}else{
throwError('表单验证失败!
');
}
},
//表单数据载入方法
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=newUserInfoFormPanel({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.ad
dEvents('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){
vardata=values.data;
Ext.apply(data,{id:
action.result.id});
try{
this.fireEvent('submit',this,newExt.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:
newInsertUserInfoWindow(),
updateWin:
newUpdateUserInfoWindow(),
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:
newExt.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:
newExt.data.JsonStore({
autoLoad:
true,
proxy:
newExt.data.HttpProxy({//使用代理获取服务器上的数据
url:
UserListGridPanel.ACT_URL
}),
fields:
['UId','UName','UTrueName','UPassword']
}),
loadMask:
{msg:
'数据加载中...'},
//选择模式
selModel:
newExt.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(){
varsm=this.getSelectionModel();
if(sm.getCount()==0)
throwError('您尚未选中任何人员记录!
');
returnsm.getSelected();
},
insert:
function(r){
this.getStore().add(r);
},
update:
function(r){
//更改本地数据
varsr=this.getSelected();
for(variinsr.data){
sr.set(i,r.get(i));
}
//提交更改
mit();
},
//使用AJAX方式删除数据库及数据列表中的选中数据
remove:
function(){
try{
varrc=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';
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ExtGridPanel 数据库 增删 完整版
![提示](https://static.bdocx.com/images/bang_tan.gif)