使用Ext的Grid,Form,Dialog来实现分页列表,CRUD

简介:这篇文章将告诉你如何使用Ext中的Grid,Form,Dialog来实现列表,创建,更新,删除,查找和分页功能
转载自：http://www.blogjava.net/puras/archive/2007/09/10/144047.html
参考:
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 : '没有记录!'