读书人

施用Ext的Grid,Form,Dialog来实现分页

发布时间: 2012-11-22 00:16:41 作者: rapoo

使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能(续)
前面已经把列表,分页,删除等部分说完了,这里再把创建和修改说说,基本的功能就差不多了.

创建

在这里,创建和修改者是用Dialog的形式来做的,首先则需要创建相应的DIV:

<!-- add div -->
<div id="a-addInstance-dlg" style="visibility:hidden;">
<div style="visibility:hidden;">
<div class="x-layout-inactive-content">
<div id="a-updateInstance-form"></div>
</div>
</div>
</div>

双击某条记录,则会弹出修改Dialog了,大概的样子如下:



修改的处理事件与添加类似,需要注意的地方就是ID是怎么传过去的:

saveUpdateForm : function() {
if (Grid.editForm.isValid()) {
Grid.editForm.submit({
params : { id : Grid.updateId},
waitMsg : '正在更新数据...',
reset : false,
failure : function(form, action) {
Ext.MessageBox.alert('友情提示', action.result.info);
},
success : function(form, action) {
Grid.updateInstanceDlg.hide();
Grid.ds.reload();
}
});
} else {
Ext.MessageBox.alert('错误', '字段填写不正确!');
}
}

到此就Over啦,列表,添,删,改都OK了.在没有做的时候,总是感觉找不到入口点,做完之后才发现,原来自己担心的问题,都不是问题,哈,想想,还是挺简单的.

读书人网 >Web前端

热点推荐