简介:这篇文章将告诉你如何使用Ext中的Grid,Form,Dialog来实现列表,创建,更新,删除,查找和分页功能
签于现在网上多数的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 : '删除成功!'}"
未完待续......
作者:puras
相关推荐
使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能
使用纯javascript实现dialog
dialog弹框上实现下拉列表功能,有二级关联菜单选项功能ExpandableListViewDemo-master 通过设置属性,可实现只显示一个Group的子菜单 , 显示全部Group的子菜单 。需要自己设置就可以了。
非常给力的JavaScript Dialog,功能、样式多多
我们经常会需要在Android界面上弹出一些对话框 比如询问用户或者让用户选择 关于Android Dialog的使用方法 已经有很多blog做出了详细的介绍(比如博客:7种形式的Android Dialog使用举例) 但是只是给出了创建各种...
各种Android Dialog的实现 包括系统的6中dialog和自定义dialog
使用jquery的dialog自定义实现alert()、confirm()等功能。
自定义dialog实现登录框自定义dialog实现登录框
使用Dialog实现从页面顶部弹出对话框,使用场景:搜索等
简单的jquery dialog实现插件,使用简单,自行修改样式
源码参考,欢迎下载
自定义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。 ...