EXTJS 4.2 网格问题的分页

Posted

技术标签:

【中文标题】EXTJS 4.2 网格问题的分页【英文标题】:Pagination for EXTJS 4.2 grid problems 【发布时间】:2016-02-19 18:47:30 【问题描述】:

如何为给定的 EXTJS 4.2 网格实现分页。我代码中的变量计数器以 JSON 格式存储我从服务器(java)端获取的数据。我使用它来使用 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>

【问题讨论】:

【参考方案1】:

将 pageSize : 2 属性添加到您的商店并 enablePaging: true 到您的代理

【讨论】:

以上是关于EXTJS 4.2 网格问题的分页的主要内容,如果未能解决你的问题,请参考以下文章

Ext JS 4.2 中的分页内存代理等效技术是啥

ExtJs - 基于远程数据的分页和缓冲网格,没有远程分页和过滤

extjs 4.1.1 - 本地数据网格中的分页

如何在 ExtJS 中动态更改分页网址?

ExtJS 4.1 中的分页问题

网格面板中的 ExtJs 5.1 分页工具栏