爲分頁EXTJS 4.2電網

我有一個Ext JS的4.2格有兩個鎖定columns.Now我想添加分頁的功能在我grid.I希望它看起來像鏈接上給出一個進度條尋呼機 http://docs.sencha.com/extjs/4.2.4/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#progress-bar-pager 現在我怎麼可以將我的網格轉換爲分頁功能的進度條分頁器網格。我當前的代碼是爲分頁EXTJS 4.2電網

<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>

來源

2016-02-18 Prateek Ratnaker

您是否嘗試複製鏈接到的示例中的相關部分？像'xtype：'pagingtoolbar''和'pageSize：10'和其他所有聽起來像可能與分頁相關的東西一樣？ – Alexander

@亞歷山大我編輯了我的代碼，並嘗試了一下，但它沒有工作.... –

您的代碼缺少以下從原來的示例代碼的關鍵部分：

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.

來源

2016-02-18 18:08:48 Alexander

@Alexander ....我編輯了我的代碼....我使用EXTJS 4.2 .....這是我的代碼工作非常好，並具有分頁功能，但現在的問題是---->如果我動態地將行添加到我的商店怎麼辦？...那麼這將無法正常工作？........我從服務器一邊在JSON格式，然後我解析這個JSON上extjs ....然後使用該JSON我添加行到網格商店使用store.add .................現在怎麼會我得到代理的存儲和數據屬性的數據屬性...？ ...現在如何做...因爲我現在不使用mydata變量，並直接從json添加行來存儲使用store.add –

...我編輯了我的代碼....如何實現分頁對於使用JSON動態添加商店數據的此類網格...計數器變量以JSON格式存儲數據，我從java（服務器）端獲取數據？ –

爲分頁EXTJS 4.2電網

回答

相關問題