简介:这篇文章将告诉你如何使用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 : '删除成功!'}"

未完待续......

Feedback

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2007-09-07 20:17 by Thomas
不错!

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2007-09-10 10:45 by 赫连紫軒
@Thomas
希望能够喜欢~^_^

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2007-09-11 10:31 by li
能给个源码吗?我用jsonReader读取数据出不来.如果能给源码请发送到followmephoe@yahoo.com.cn,谢谢!

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2007-09-11 16:00 by zhdq
能给我发一份源代码,谢谢,
zhdq_j2ee@126.com
谢谢,学习学习

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2007-09-11 17:35 by 赫连紫軒(puras)

实在不好意思啊
因为只是临时为了测试用的
所以代码写的很乱
等有时间我整理一下
再发给各位朋友
我会尽快的

有什么问题可以在这里共同探讨一下^_^

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2007-10-20 10:25 by xshlife
很不错,我现在也刚开始入门ext ,请发一份你这个例子源码给我,谢谢.
xshlife@yahoo.com.cn

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2007-10-22 09:18 by 赫连紫軒(puras)
@xshlife

http://www.blogjava.net/puras/archive/2007/09/12/144478.html

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能[未登录]  回复  更多评论   

2007-11-08 09:03 by 影子
谢谢你的文章,Ext我现在还没完全入门,能否发一份原代码和后续部分的URL给我,谢谢!
Email:herhun@163.com
MSN:herhun@hotmail.com
QQ:4953295

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2007-11-13 16:17 by 杨雪松
totalCount 要怎么取得呢?
还是要再查询一次数据库?

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2007-11-14 09:44 by 赫连紫軒(puras)
@杨雪松
后台如何处理
自己随意控制就可以了
我做的是查了两次数据库
一次是取总记录数
一次是取当前页的记录

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2007-12-14 11:12 by 网事
可以给个联系的方式吗?
QQ或者是MSN?

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2007-12-20 13:20 by puras
@网事
啊啊
在公司所有的聊天工具都用不了......
MSN最近上的也很少
MSN和GTalk:puras.he@gmail.com
不一定什么时候上线.呵.

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2008-04-01 11:38 by 暗暗
请问 把表格和表单怎么才能结合一起 就像jsp那样 表格里不一定显示结果集 只是用来布局

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2009-02-22 14:59 by fanfan
请问可以发给我一个这样的工程吗。。、、、、、我是初学者,遇到很多困难
我的QQ:272646482
邮箱:fanxing234@126.com

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2009-04-21 17:22 by 小涛
你好,我也是刚学这个的,能发份源码给我吗?huangsd@newlandcomputer.com

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2010-01-13 15:52 by 老万
可以给我份吗?

# re: 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能  回复  更多评论   

2010-01-13 15:52 by 老万
我的邮箱是:liudan_net@163.com
我也是初学者

只有注册用户登录后才能发表评论。


网站导航:
 

posts - 47, comments - 124, trackbacks - 0, articles - 0

Copyright © puras