简介:这篇文章将告诉你如何使用Ext中的Grid,Form,Dialog来实现列表,创建,更新,删除,查找和分页功能
参考:http://extjs.com/learn/Tutorial:Using_Ext_grid_form_dialog_to_achieve_paging_list,_create,_edit,_delete_function
作者:puras
签于现在网上多数的Form的例子都多数是描述前台UI的,而没有对与服务端通讯的部分,故参考EXTJS的一个指南,写下此文,希望能对大家有所帮助.
在WEB应用中,大部分的页面都可以被分为:列表,创建,读取,更新,删除.在Ext的文档中心提供了一个非常好的例子,一个行内编辑的表格.然而,在现实中,行内编辑的表格是远远不够的,还需要用不同的方式来展示表单.下面的例子中向你展示如何在表格中创建/更新一个对话框表单.
列表功能
首先是是一个权限列表页,它包含分页,查询/过滤功能,创建和删除功能.
先定义数据源:
this.ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({ url : '/wit/data.shtml' }), //'/wit/data.shtml' 一个读取数据列表的Action
reader : new Ext.data.JsonReader({ //使用JSON传输入数据
root : 'roleList',
totalProperty : 'totalCount',
id : 'id'
},
// 定义字段映射
[
{
name : 'id',
mapping : 'id',
type : 'string'
},
{
name : 'name',
mapping : 'name',
type : 'string'
},
{
name : 'description',
mapping : 'description',
type : 'string'
},
{
name : 'createDate',
mapping : 'createDate',
type : 'string'
},
{
name : 'updateDate',
mapping : 'updateDate',
type : 'string'
}
]),
remoteSort : true
});
this.ds.load({ params:{ start : 0, limit : 20 } });
指定数据的来源位置,解析的方式,以及字段的映射.
接下来是表格中表头的定义,匹配上面的字段:
this.cm = new Ext.grid.ColumnModel([
{
header : '#',
dataIndex : 'id',
width : 30,
sortable : 1
},
{
header : '名称',
dataIndex : 'name',
width : 140,
sortable : 1
},
{
header : '描述',
dataIndex : 'description',
width : 140,
sortable : 1
},
{
header : '创建日期',
dataIndex : 'createDate',
width : 150,
sortable : 1
},
{
header : '修改日期',
dataIndex : 'updateDate',
width : 150,
sortable : 1
}
]);
再定义一下Grid:
this.grid = new Ext.grid.Grid('htmlGridPanel', {
ds : Grid.ds,
cm : Grid.cm,
enableColLock : false,
autoSizeColumns : true,
loadMask : true
});
this.grid.render();
现在,就可以看到简单的表格了.功能还有待完善.
接下来,在表格的头部面板处,添加过滤/查询的下拉菜单:
this.gridHead = this.grid.getView().getHeaderPanel(true);
this.toolbar = new Ext.Toolbar(this.gridHead);
this.filterBtn = new Ext.Toolbar.MenuButton({
icon : '../images/class.gif',
cls : 'x-btn-text-icon',
text : '选择过滤器',
tooltip : '选择一个过滤器',
menu : { items : [
new Ext.menu.CheckItem({ text : '编号', value : 'id', checked : true, group : 'filter', checkHandler : this.onItemCheck}),
new Ext.menu.CheckItem({ text : '名称', value : 'name', checked : false, group : 'filter', checkHandler : this.onItemCheck}),
new Ext.menu.CheckItem({ text : '描述', value : 'description', checked : false, group : 'filter', checkHandler : this.onItemCheck})
]},
minWidth : 105
});
this.toolbar.add(this.filterBtn);
this.filter = Ext.get(this.toolbar.addDom({
tag : 'input',
type : 'text',
size : '30',
value : '',
style : 'background : #F0F0F9;'
}).el);
this.filter.on('keypress', function(e) {
if (e.getKey() == e.ENTER && this.getValue().length > 0) {
Grid.ds.load({ params : { start : 0, limit : 20 }});
}
});
在表格的底部面板添加分页,添加,删除按钮:
this.gridFoot = this.grid.getView().getFooterPanel(true);
this.paging = new Ext.PagingToolbar(this.gridFoot, this.ds, {
pageSize : 20,
displayInfo : true,
displayMsg : '共有 {2} 条记录.当前显示 {0} - {1}条记录.',
emptyMsg : '没有记录!'
});
this.paging.add('-', {
pressed : true,
enableToggle : true,
text : '添加',
cls : '',
toggleHandler : this.doAdd
});
this.paging.add('-', {
pressed : true,
enableToggle : true,
text : '删除',
cls : '',
toggleHandler : this.doDel
});
在分页中,你需要在从服务器端加载数据之前发送过滤的字段和值:
this.ds.on('beforeload', function() {
Grid.ds.baseParams = {
filterValue : Grid.filter.getValue(),
filterTxt : Grid.filterBtn.getText()
};
});
从服务器端返回的列表的JSON结果如下:
{"roleList":[{"id":21,"description":"description21","name":"puras21","createDate":"Fri Sep 07 15:54:44 CST 2007","updateDate":"Fri Sep 07 15:54:44 CST 2007"},{"id":40,"description":"description40","name":"puras40","createDate":"Fri Sep 07 15:54:44 CST 2007","updateDate":"Fri Sep 07 15:54:44 CST 2007"}],"totalCount":2}
删除
删除方法如下:
doDel : function() {
var c = Grid.grid.getSelections();
if (c.length > 0)
Ext.MessageBox.confirm('消息', '确认要删除所选记录?', Grid.doDelProc);
else
Ext.MessageBox.alert('警告', '最少需要选择一条记录!');
},
doDelProc : function(btn) {
if (btn == 'yes') {
if (Grid.grid.getSelectionModel().hasSelection()) {
var ids = new Array();
var records = Grid.grid.getSelectionModel().getSelections();
for (var i = 0, len = records.length; i < len; i++) {
ids[ids.length] = records[i].id;
}
Ext.lib.Ajax.request(
'GET',
'/wit/delete.shtml?ids=' + ids,
{
success : Grid.onSuccess,
failure : function(form, action) { Ext.MessageBox.alert('消息', '删除失败!');}
},
null
);
}
}
},
onSuccess : function(o) {
var response = function(json) {
try {
return eval('(' + json + ')');
} catch(e) {}
return null;
}(o.responseText);
if (response.failure && response.failure == true) {
Ext.MessageBox.alert('消息', response.info);
}
Grid.ds.reload();
}
通过Ajax的形式提交到服务器端.如果删除失败,则将失败信息显示给用户.onSuccess可以用于添,删,改三个功能的处理.返回的JSON数据结构如下:
"{success : true, info : '删除成功!'}"
未完待续......
分享到:
相关推荐
dialog弹框上实现下拉列表功能,有二级关联菜单选项功能ExpandableListViewDemo-master 通过设置属性,可实现只显示一个Group的子菜单 , 显示全部Group的子菜单 。需要自己设置就可以了。
使用纯javascript实现dialog
我们经常会需要在Android界面上弹出一些对话框 比如询问用户或者让用户选择 关于Android Dialog的使用方法 已经有很多blog做出了详细的介绍(比如博客:7种形式的Android Dialog使用举例) 但是只是给出了创建各种...
各种Android Dialog的实现 包括系统的6中dialog和自定义dialog
自定义dialog实现登录框自定义dialog实现登录框
使用Dialog实现从页面顶部弹出对话框,使用场景:搜索等
简单的jquery dialog实现插件,使用简单,自行修改样式
使用jquery的dialog自定义实现alert()、confirm()等功能。
源码参考,欢迎下载
自定义dialog实现listview长按删除item数据
4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2. 把select变成comboBox。 4.4.3. ...
学会如何正确使用Dialog,以及更规范的Dialog模板,和创建的方式。
VC++ Windows API编程 Dialog的实现,实现了简单的对话框调用。
16. android dialog ——列表项带图标的列表对话框、模拟菜单项带图标 详情参考: http://blog.csdn.net/jamesliulyc/archive/2011/04/23/6347449.aspx
15. android dialog ——列表对话框
Dialog嵌套Viewpager实现Tabhost效果
4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2. 把select变成comboBox。 ...
The class is ready for i18n, override the Ext.ux.UploadDialog.Dialog.prototype.i18n object with your language strings, or just pass i18n object in config. Server side handler. The files in the queue...