как будет работать пагинация в ext grid - PullRequest
Новая
       18

как будет работать пагинация в ext grid

0 голосов
/ 21 марта 2011

Я использую эту статью архитектуры http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/

вот мой Application.ResellerIroGrid.js кнопки нумерации страниц идут, но нет. страниц и пагено. не придет. 

Application.ResellerIroGrid = Ext.extend(Ext.grid.GridPanel, {
     border:false
    ,cityname : ''
    ,columndataindex : ''
    ,fromdate:''
    ,todate : '' 
    ,initComponent:function() {
        var config = {
            store:new Ext.data.JsonStore({
                // store configs
                autoDestroy: true,
                autoLoad :false
                ,method: 'GET'
                ,baseParams: {
                    _command:'getresellersiro'
                    ,city:this.cityname
                    ,columndataindex : this.columndataindex
                    ,fromdate : this.fromdate
                    ,todate : this.todate
                }
                ,url: 'api/index.php'
                // reader configs
                ,root: 'reseller'
                ,totalProperty: 'totalcount'
                ,idProperty: 'mobile',
                fields: [
                   {name: 'caller'},
                   {name: 'designa'},
                   {name: 'mobile'},
                   {name: 'app_date'},
                   {name: 'transferto'},
                   {name: 'data_city'},
                   {name: 'AllocatedTo'},
                   {name: 'Parentid'},
                   {name: 'gotthru'}
                ]
            })
            ,columns: [
                {
                    id       :'caller',
                    header   : 'Caller', 
                    width    : 120, 
                    sortable : true, 
                    dataIndex: 'caller'
                },
                {
                    id       :'designa',
                    header   : ' Designation', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'designa'
                },
                 {
                    id       :'mobile',
                    header   : 'Mobile', 
                    height : 50,
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'mobile'
                },
                {
                    id       :'app_date',
                    header   : ' Appointment Date', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex : 'app_date'
                },
                {
                    id       :'transferto',
                    header   : ' Transfered To', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'transferto'
                },
                {
                    id       :'data_city',
                    header   : ' Data City', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'data_city'
                },
                {
                    id       :'AllocatedTo',
                    header   : ' Allocated To', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'AllocatedTo'
                },
                {
                    id       :'Parentid',
                    header   : ' Parent Id', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'Parentid'
                },
                {
                    id       :'gotthru',
                    header   : ' Appointment Type', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'gotthru'
                }
            ]
            ,plugins :[]
            ,viewConfig :{forceFit:true}
            ,tbar :[]
            ,bbar: new Ext.PagingToolbar({
                pageSize: 5,
                store: this.store,
                displayInfo: true,
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No topics to display"
            })
          ,height : 250
          ,width : 860
           ,title : 'Reseller Iro Grid'
        }; // eo config object

        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        Application.ResellerIroGrid.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent
    ,onRender:function() {
        this.store.load();

        Application.ResellerIroGrid.superclass.onRender.apply(this, arguments);
    } // eo function onRender
});

Ext.reg('ResellerIroGrid', Application.ResellerIroGrid);

1 Ответ

0 голосов
/ 21 марта 2011

Вам необходимо иметь атрибут totalProperty в настройках Store или JsonReader, и это свойство должно быть отправлено сервером JSON.

Например: 

,totalProperty: 'totalCount'
,root: 'reseller',
,idProperty: 'caller'

Кроме того, не задавайте жесткие параметры в свойстве store url. Для этого вы должны использовать опцию конфигурации baseParams: 

method:'GET'
,baseParams: {
    _command:'getresellersiro'
    ,city:this.cityname
    [...]
}
,url:'api/index.php'

И, конечно, у вас должен быть объявлен PagingToolbar для вашей сетки в initComponent: 

var pagesize = 5;

var store = new Ext.data.JsonStore({ 
      [...]
      ,params:{start:0, limit:pagesize}
});

var paging_toolbar = new Ext.PagingToolbar({
    pageSize: pagesize,
    displayInfo: true,
    emptyMsg: 'No data',
    store: store
});

var grid = new Ext.grid.GridPanel({
    store:store,
    [...]
    bbar:paging_toolbar
});
...