extjs 分页排序

extjs GridPanel 使用jsonstore的load来加载远程数据:

Ext.onReady(function() {
           var store = new Ext.data.JsonStore({
                       url : 'getRes.ax',//远程加载
                       root : 'rows',//告诉store,server返回json数据rows是本页的记录数组
                       totalProperty : 'count',//告诉store,server返回json数据中count表明总共记录数
                       remoteSort : true,//远程排序
                       fields : [{
                                   name : 'id',
                                   type : 'int'
                               }, {
                                   name : 'actived',
                                   type : 'bool'
                               }, {
                                   name : 'selected',
                                   type : 'bool'
                               }, {
                                   name : 'value',
                                   type : 'string'
                               }],
                       listeners : {
                           beforeload : function() {
                            //beforeloadr事件是添加参数的最好途径
//这里可以添加查询条件   
                               // can add the filter params at here
                               // store.setBaseParam('selected:bool',true);
                               // store.setBaseParam('actived:bool',true);
                               store.setBaseParam('ps', Ext.encode({
                                                   'selected' : true,
                                                   'actived' : true
                                               }));
//结合pagingtoolbar使用时,每次的分页排序,会向serversrvr传参数start[开始的行数],limit[需要的行数],sort[排序的字段],dir[排序方向]。


                           }
                       }
                   });

           var PAGESIZE = 2;

           var grid = new Ext.grid.GridPanel({
                       store : store,
                       bbar : new Ext.PagingToolbar({
                                   store : store,
                                   displayInfo : true,
                                   pageSize : PAGESIZE
                               }),
                       columns : [{
                                   header : 'actived',
                                   sortable : true,
                                   dataIndex : 'actived'
                               }, {
                                   header : 'selected',
                                   sortable : true,
                                   dataIndex : 'selected'
                               }, {
                                   header : 'value',
                                   sortable : true,
                                   dataIndex : 'value'
                               }],
                       columnLines : true,
                       viewConfig : {
                           forceFit : true,
                           emptyText : 'No data available'
                       },
                       stripeRows : true,
                       header : false
                   });

           store.load({
                       params : {
                           start : 0,
                           limit : PAGESIZE
                       }
                   });

           var vi = new Ext.Viewport({
                       layout : 'fit',
                       items : grid
                   });

           vi.show();
       });


Total views.

© 2013 - 2024. All rights reserved.

Powered by Hydejack v6.6.1