Extjs之PagingToolbar

Ext.PagingToolbar,Ext.data.Store,Ext.data.HttpProxy,Ext.data.JsonReader,Ext.grid.GridPanel

在这里讲一下ExtJs下的一套分页步骤以及涉及到的Ext控件.

因为引入了Json作为数据传输格式,所以这里需要通过Http获得我们想要的数据:

 proxy: new Ext.data.HttpProxy
                (
                    {
                        //url:'/Ajax/getEmpList.ashx'  
                        url: '/FX_LOG_QZ_T/getList'
                    }
                ),

Note:创建HttpProxy的同时,用url这个参数指定获取数据的路径.

竟然传输的数据是Json,顺理成章的就应该换成能解析Json的Reader:

                //解析Json
                reader: new Ext.data.JsonReader
                (
                    {
                        totalProperty: 'totalProperty',
                        root: 'data',
                        //主键
                        id: 'JSON_pid',
                        //表格显示字段列
                        fields:
                        [
                            'JSON_pid', 'JSON_no_ick', 'JSON_no_machine'
                        ]
                    }
                ),

那么一个完整的Ext.data.Store如下:

var storeMain = new Ext.data.Store
        (
            {
                //表示从哪里获得数据
                proxy: new Ext.data.HttpProxy
                (
                    {
                        //url:'/Ajax/getEmpList.ashx'  
                        url: '/FX_LOG_QZ_T/getList'
                    }
                ),

                //解析Json
                reader: new Ext.data.JsonReader
                (
                    {
                        totalProperty: 'totalProperty',
                        root: 'data',
                        //主键
                        id: 'JSON_pid',
                        //表格显示字段列
                        fields:
                        [
                            'JSON_pid', 'JSON_no_ick', 'JSON_no_machine'
                        ]
                    }
                ),
                remoteSort: true
            }
        );

Note:remoteSort指示远程排序(后台排序)

准备好数据源之后,接下来写我们的Ext分页工具条:

   var pageSize = 20;
        var pagingToolbar = new Ext.PagingToolbar
        ({
            emptyMsg: "没有数据",
            displayInfo: true,
            displayMsg: "显示从{0}条数据到{1}条数据，共{2}条数据",
            store: storeMain,
            pageSize: pageSize
        });

Note:如果配置了分页工具条,store.load()就必须在构造Grid之后执行,否则分页工具条将不起作用

完整的Ext.grid.GridPanel如下:

grid = new Ext.grid.GridPanel
                (
                    {
                        renderTo: 'grid',
                        height: 680,
                         1240,
                        cm: colModel, //行列
                        store: storeMain, //数据源
                        trackMouseOver: true, //鼠标特效
                        loadMask: true,
                        autoShow: true,
                        autoScroll: true,
                        bbar: pagingToolbar,
                    }
                )
                

最后,在初始化时通过传参数去获取希望得到的分页数据:

                //加载数据
                storeMain.load({ params: { start: 0, limit: pageSize } });

查询参数

一般我们查询出一个具有分页功能的表格数据之后,还会需要根据用户的输入根据这个条件进行条件查询,那么用Ext可以这么实现:

首先在Ext.grid.GridPanel加入一个顶部的工具条:

                        //头部
                        tbar:
                        [
                             '姓名',
                             { xtype: 'textfield',  120, id: 'username', name: 'username' }
                             { text: '搜索', iconCls: 'search', handler: SerachGrid }, { xtype: 'tbseparator' }
                        ]

SerachGrid函数中重新加载数据,并且将参数加到params中

 function SerachGrid() {
            username = Ext.get('username').dom.value;
            storeMain.reload
            (
                {
                    params: { start: 0, limit: pageSize, username: username }
                }
            )
        }

Ext.PagingToolbar翻页时查询参数丢失的处理  

在测试数据足够分两页的情况下,我们会发现,上面的代码中存在一个问题,就是带条件查询的情况下,我们并不能如意得到翻页的数据,因为翻页时会发生查询参数丢失,查询

的数据不再是带条件的数据,为了处理这个问题,我们可以监听beforeload:

在Ext3中使用的方法是：
store.on('beforeload',function(){
    store.baseParams = {type:type_combo.getValue()};
});

在Ext4中，应该改成：
store.on("beforeload",function(){
    Ext.apply(store.proxy.extraParams, {type:type_combo.getValue()});
});

比如子啊Ext3中,代码如下:

  storeMain.on('beforeload', function () {
            storeMain.baseParams = { username: username };
        });

END