EXTJS 4.2 网格问题的分页

Question

如何为给定的 EXTJS 4.2 实现分页 grid.The 我的代码中的变量计数器存储我从服务器（java）端获得的数据 JSON format.I使用它来使用 store.add 函数将行添加到网格......现在我如何为给定的网格实现分页？我当前的代码是

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title id='title'>HTML Page setup Tutorial</title>       
        <link rel="stylesheet" type="text/css" href="ext-all.css" />       
        <script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

    var field = [];
    var columnList = [];
    var counter = {
        "levels":

            [{
            "name": "class",
            "samples": [{
                "name": "1660SH_3",
                "features": [{
                    "count": 8,
                    "name": "Bacteroidia"
                }, {
                    "count": 9,
                    "name": "Bacteroidiaa"
                },
                {
                    "count": 10,
                    "name": "Bacteroidiab"
                },
                {
                    "count": 11,
                    "name": "Bacteroidiac"
                }]
            }, {
                "name": "1660SH_4",
                "features": [{
                    "count": 5,
                    "name": "Bacteroidia"
                }, {
                    "count": 6,
                    "name": "Bacteroidiaa"
                },
                 {
                    "count": 7,
                    "name": "Bacteroidiab"
                },
                {
                    "count": 8,
                    "name": "Bacteroidiac"
                }]
            }]
        }, ]
    };
    columnList.push({
        header: "Sample v/s Feature",
        dataIndex: "Sample v/s Feature",
        width: 0.1 * Ext.getBody().getViewSize().width,
        columnLines: true,
        locked: true
    });
    field.push("Sample v/s Feature");
    for (var p = 0; p < Object.keys(counter.levels[0].samples).length; p++) {

        columnList.push({
            header: counter.levels[0].samples[p].name,
            dataIndex: counter.levels[0].samples[p].name,
            flex: 1,
            columnLines: true
        });
        field.push(counter.levels[0].samples[p].name);
    }

    if (counter.levels[0].name == 'class') {
      var d=[];
        for (var p = 0; p < Object.keys(counter.levels[0].samples[0].features).length; p++)
         {
            var s = {};
            s["Sample v/s Feature"] = '<b>' + counter.levels[0].samples[0].features[p].name + '</b>';
            for (var j = 0; j < Object.keys(counter.levels[0].samples).length; j++) 
            {
                s[counter.levels[0].samples[j].name] = counter.levels[0].samples[j].features[p].count;
            }
            d.push(s);

        }

        var Grid7Store = new Ext.data.ArrayStore({
                fields: field,
                data: {
                    count:d.length,
                    data:d
                },
                proxy:{
                    type:"memory",
                    reader: {
                        type: 'json',
                        root: 'data',
                        totalProperty: 'count'
                    }
                }
            });


        var classTable = Ext.create('Ext.grid.Panel', {
            style: 'border: solid Blue 1px',
            id: 'family',
            renderTo: Ext.getBody(),
            store: Grid7Store,

            columns: columnList,
            columnLines: true,
            width: Ext.getBody().getViewSize().width,
            height: Ext.getBody().getViewSize().height,
            dockedItems: [
                {
                    xtype: 'pagingtoolbar',
                    dock: 'bottom',
                    displayInfo: true,
                    store: Grid7Store
                }
            ]

        });

    }
});

  </script>
  </head>
    <body>

    </body>
</html>

Answer 1

将 pageSize : 2 属性添加到您的商店并为您的代理启用 Paging: true

EXTJS 4.2 网格问题的分页

Pagination for EXTJS 4.2 grid problems

extjs

extjs4

extjs4.1

extjs4.2