创建分页不起作用

时间:2012-09-19 19:58:10

标签: extjs extjs3

我在extjs 3.1中创建分页 但有些原因它无法正常工作。 请问我做错了什么。 我的页数= 5。 分页计数正确到来。意思是显示底部的页数即将到来。

但网格显示所有数据。 我的代码如下

Ext.onReady(function() {

    var store = new Ext.data.JsonStore({
        root : 'data',
        totalProperty : 'total',
        idProperty : 'facId',
        fields : [ "address1", "address2", "city", "country", "ehsContact",
                "facilityManager", "facilityProduct", "facilityType", "fax",
                "facId", "name", "phone", "state", "subGroupA", "subGroupB",
                "zipCode", {
                    name : 'businessUnitId',
                    mapping : 'businessVO.businessId'
                }, {
                    name : 'businessUnitName',
                    mapping : 'businessVO.businessName'
                } ],

        proxy : new Ext.data.HttpProxy({
            url : 'facility.do?method=getAllFacility'
        })
    });

    var grid = new Ext.grid.GridPanel({
        width : 700,
        height : 500,
        title : 'ExtJS.com - Browse Forums',
        store : store,
        trackMouseOver : false,
        disableSelection : true,
        loadMask : true,

        columns : [ {
            id : 'facId',
            header : "facId",
            dataIndex : 'facId',
            sortable : true
        }, {
            header : "fax",
            dataIndex : 'fax',
            width : 100,
            sortable : true
        }, {
            header : "state",
            dataIndex : 'state',
            sortable : true
        }, {
            id : 'address1',
            header : "address1",
            dataIndex : 'address1',
            sortable : true
        } ],

        viewConfig : {
            forceFit : true,
        },

        bbar : new Ext.PagingToolbar({
            pageSize : 5,
            store : store,
            displayInfo : true,
            displayMsg : 'Displaying topics {0} - {1} of {2}',
            emptyMsg : "No topics to display"
        })
    });

    store.load({
        params : {
            start : 0,
            limit : 5
        }
    });

    centerPanel = Ext.getCmp('centerlPanel');
    centerPanel.add({
        layout : 'border',
        region : 'center',
        layout : 'fit',
        items : grid
    });
    centerPanel.doLayout();
});

2 个答案:

答案 0 :(得分:2)

我总是发现Pagination(使用JSON / PHP / MySQL)我必须返回总数,然后强制我的数据库查询对它们有限制。这就是开始和限制的范围所在。

store.load({
    params : {
        start : 0,
        limit : 5
    }
});

然后对数据库的查询将是

     $start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
       $end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);
$limitquery = $query." LIMIT ".$start.",".$end;

(这是针对PHP / MySQL的) 然后页面发送适当的开始/结束以浏览您的数据。然后服务器/数据库将对您的退货进行排序。如果您想要像客户端内存数据库一样使用,您仍需要找到一种方法来执行此方法。如果您担心这会给您的服务器带来的工作负载,我发现使用LIMIT方法在我们的MySQL数据库上这是一个非常小的工作负载。

答案 1 :(得分:1)

ExtJS3本身只支持远程分页(所以你必须在服务器端处理它)。 AFAIK pageSize参数仅用于计算页数,当前页面和请求的参数之一(因此您可以在服务器上获取它的值)。如果您从服务器提供超过5行 - 将显示所有行。

您可以通过在服务器上实现分页或使用PagingStore来解决此问题(这是第二种方法的示例解决方案:http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5