extjsグリッドのページング

Question

私はdivを持つhtmlページを持っていますid="grid-example"。

私は、JSファイルを参照し、私は、グリッドが、ページングが動作していない取得していますコード

Ext.onReady(function() { 

var myData = [ 
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], 
    ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], 
    ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], 
    ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'], 
    ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'], 
    ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'], 
    ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'], 
    ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'], 
    ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'], 
    ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'], 
    ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'], 
    ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'], 
    ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'], 
    ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'], 
    ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'], 
    ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'], 
    ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'], 
    ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'], 
    ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'], 
    ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'], 
    ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'] 

]; 

// create the data store 
var store = Ext.create('Ext.data.ArrayStore', { 

    fields: [ 
     { name: 'company' }, 
     { name: 'price', type: 'float' }, 
     { name: 'change', type: 'float' }, 
     { name: 'pctChange', type: 'float' }, 
     { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} 
    ], 
    data: myData 

}); 

// create the Grid 
//var pluginExpanded = true; 
var grid = Ext.create('Ext.grid.Panel', { 
    store: store, 
    stateful: true, 
    stateId: 'stateGrid', 

    columns: [ 
     { 
      text: 'Company', 
      flex: 1, 
      sortable: true, 
      dataIndex: 'company' 
     }, 

     { 
      text: 'Price', 
      width: 75, 
      sortable: true, 
      //renderer: 'usMoney', 
      dataIndex: 'price', 
      menuDisabled: true //it will show/hide menu for sorting. 

     }, 

     { 
      text: 'Change', 
      width: 75, 
      sortable: true, 
      dataIndex: 'change', 
      menuDisabled: true //it will show/hide menu for sorting. 
     }, 

     { 
      text: '% Change', 
      width: 75, 
      sortable: true, 
      dataIndex: 'pctChange' 
     }, 

     { 
      text: 'Last Updated', 
      width: 185, 
      sortable: true, 
      renderer: Ext.util.Format.dateRenderer("d/M/yy"), 
      dataIndex: 'lastChange' 
     }, 

    ], 

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

     }), 

    height: 550, 
    width: 600, 
    title: 'Array Grid', 
    renderTo: 'grid-example', 
    viewConfig: { 
    stripeRows: true 

    } 
}); 

}); 

を次のように含まれています...私はしたいme.` を助けないでください。行の数は1ページあたり5でなければなりません。

Answer 1

削除してみてくださいlimit:10 Ext.PagingToolbarの設定では表示されません。

Answer 2

@Amit

私はあなたがグリッドパネル内のデータを移入するためにローカル配列を使用していることがわかります。 ExtJSのグリッドパネルのページングツールバーは、サーバー側のデータでのみ動作し、サーバからデータを取得し、ページを計算するためには、次のプロパティを使用しています：

• 開始
• 制限
• totalProperty - 読者
に
• のpageSize

は、サーバは、要求されたデータを返すために、開始とリミットとのpageSizeを処理し、totalPropertyに設定されているプロパティにレコードの合計数を設定する必要があります（例えば、 'totalRecords'）。

あなたは、メモリ内のデータとページネーションを探している場合は、あなたはhttp://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5を参照するか、ダウンロードしたのExtJS 3.xのフォルダに例のコードを参照してもよい - 例/ UX/PagingMemoryProxy.js

Answer 3

pageSize: 5設定は店舗に行かなければなりません。

Answer 4

私にとって、適切なリーダープロパティを設定するのは、それが何をしたかです。次に、サーバー上のクエリ文字列パラメータstartとlimitを処理して、データの選択を実行するだけです。 DataSource.Skip(start).Take(limit);

var myStore = Ext.create('Ext.data.Store', { 
    model: 'Book', 
    pageSize: 10, 
    proxy: { 
     type: 'ajax', 
     url: '/api/data', 
     reader: { 
      // sends url?start={number}&limit={number} 
      type: 'json', 
      totalProperty: "results", 
      root: "rows" 
     } 
    }, 
    autoLoad: { params: { start: 0, limit: 10 } } 
}); 

---

私は上記の設定と一致するWebサービスから返されますresposne。

{ 
    "success":"true", 
    "results":100, 
    "rows":[ 
     {"Title":"Book #61","Author":"Some Guy","Year":2010} 
     .... 
     .... 
    ] 
}