EXTJS 4.2 网格的分页

Question

我有一个带有两个锁定的 ext js 4.2 网格 columns.Now 我想在我的 grid.I 中添加分页功能希望它看起来像 [=16] 上给出的进度条寻呼机=] http://docs.sencha.com/extjs/4.2.4/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#progress-bar-pager 现在如何将我的网格转换为具有分页功能的进度条寻呼机网格。我当前的代码是

<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"}]},
                          {"name":"1660SH_4","features":[{"count":5,"name":"Bacteroidia"},{"count":6,"name":"Bacteroidiaa"}]}]},
  ]};


      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);
        }
        var Grid7Store = new Ext.data.ArrayStore({
            fields: field,
            data: [] });





      if(counter.levels[0].name=='class')
      {
        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

      });
         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;
            }
            Grid7Store.add(s);
        }
      }














});
</script>
  </head>
    <body>

    </body>
</html>

Answer 1

您的代码缺少原始示例代码中的以下关键部分：

Ext.require([
    'Ext.ux.ProgressBarPager'
]);

和

plugins: new Ext.ux.ProgressBarPager()

和

proxy: {
    type: 'memory',
    enablePaging: true,
    data: myData
    reader: {
        type: 'array'
    }
}

I have made a fiddle.

EXTJS 4.2 网格的分页

Pagination for EXTJS 4.2 grid

extjs

extjs4

extjs4.1

extjs4.2