2012-02-04 71 views
0

我正在使用extjs创建一些丰富的接口,但我无法将分页添加到代码。可有人告诉我如何正确添加分页这段代码extjs分页不工作

Ext.require([ 
    'Ext.data.*', 
    'Ext.grid.*' 
]); 

Ext.onReady(function(){ 
    Ext.define('Book',{ 
     extend: 'Ext.data.Model', 
     fields: [ 
      // set up the fields mapping into the xml doc 
      // The first needs mapping, the others are very basic 
      {name: 'Author', mapping: 'ItemAttributes > Author'}, 
      'Title', 'Manufacturer', 'ProductGroup' 
     ] 
    }); 

    // create the Data Store 
    var store = Ext.create('Ext.data.Store', { 
     model: 'Book', 
     autoLoad: true, 
     proxy: { 
      // load using HTTP 
      type: 'ajax', 
      url: 'sheldon-2.xml', 
      // the return will be XML, so lets set up a reader 
      reader: { 
       type: 'xml', 
       // records will have an "Item" tag 
       record: 'Item', 
       idProperty: 'ASIN', 
       totalRecords: '@total' 
      } 
     } 
    }); 

    // create the grid 
    var grid = Ext.create('Ext.grid.Panel', { 
     store: store, 
     columns: [ 
      {text: "Author", flex: 1, dataIndex: 'Author', sortable: true}, 
      {text: "Title", width: 180, dataIndex: 'Title', sortable: true}, 
      {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true}, 
      {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true} 
     ], 
     renderTo:'example-grid-group-v3', 
     width: 540, 
     height: 200 
    }); 
}); 

回答

1

你只需要一个分页工具栏添加到您的GridPanel的BBAR配置,并把它挂到您的网格使用相同的店铺。看一个例子:http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/paging.html

喜欢的东西:

  bbar: Ext.create('Ext.toolbar.Paging', { 
       store: store, 
       displayInfo: true, 
       displayMsg: 'Displaying items {0} - {1} of {2}', 
       emptyMsg: "No items to display" 
      })