ext 客户端分页



Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '../ux/');

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.util.*',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.toolbar.Paging',
    'Ext.ux.SlidingPager'
]);

Ext.onReady(function(){

    var myData = function ()
 {
 
  return [
        ['1',71.72,0.02,0.03],
        ['2',29.01,0.42,1.47],
        ['3',83.81,0.28,0.34],
   ['1',71.72,0.02,0.03],
        ['2',29.01,0.42,1.47],
   ['1',71.72,0.02,0.03],
        ['2',29.01,0.42,1.47],
   ['1',71.72,0.02,0.03],
        ['2',29.01,0.42,1.47],
   ['1',71.72,0.02,0.03],
        ['2',29.01,0.42,1.47],
        ['4',52.55,0.01,0.02]
      
    ]
 };

 

    // register model
    Ext.define('Company', {
        extend: 'Ext.data.Model',
        idProperty: 'company',
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'}
        ]       
    });
   

    // create the data store
    var store = Ext.create('Ext.data.Store', {
        model: 'Company',
        remoteSort: true,
        pageSize: 2,
        proxy: {
            type: 'pagingmemory',
            data: myData(),
            reader: {
                type: 'array'
            }
        }
    });
   
    // create the Grid
    var grid = Ext.createWidget('gridpanel', {
        title:'Sliding Pager',
        store: store,
        columns: [{
                id:'company',
                text: '名称',
                sortable: true,
                dataIndex: 'company',
                flex: 1
            },{
                text: '价格',
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'price',
                width: 75
            },{
                text: '更改',
                sortable: true,
                dataIndex: 'change',
                width: 75
            }],
        stripeRows: true,
        height:320,
        width:600,
        frame:true,
        resizable: {
            handles: 's' 
        },
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true
        })
    });

    grid.render('test');

    store.load();
});