как будет работать пагинация в внешней сетке

Я использую эту статью об архитектуре 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);

pagination grid extjs
person XMen    schedule 21.03.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У вас должен быть атрибут totalProperty в вашем хранилище или конфигурации JsonReader, и это свойство должно быть отправлено сервером JSON.

Eg :

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

Кроме того, не следует жестко указывать параметры в свойстве 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
});
person jujule    schedule 21.03.2011
comment
Я изменил свойство totalcount и изменил свой ответ json, например, этот {reseller: [], totalcount: 10}, но все же моя разбивка на страницы не приходит, и также изменил baseParams, но мой запрос идет в POST, почему какие-либо способы сначала я хочу решить проблема нумерации страниц - person XMen; 21.03.2011
comment
totalcount с заглавной буквой C? я имею в виду то же, что и в собственности - person jujule; 21.03.2011
comment
но в ответе json m используется small, а в моем коде store m - маленький c, так что это нормально? - person XMen; 21.03.2011
comment
да, должно. но только что отредактировал свой пост с самой важной частью;) - person jujule; 21.03.2011
comment
эта вещь уже находится в моем файле в вопросе, пожалуйста, проверьте, что не так в моем файле на bbar, я дал pagingtoolbar - person XMen; 21.03.2011
comment
да. Я не уверен, будет ли «this.store» доступен в то время в том виде, в котором вы его объявляете. Попробуйте сначала объявить хранилище, затем панель инструментов подкачки, а затем сетку в initComponent. - person jujule; 21.03.2011
comment
как я буду использовать эту архитектуру для этого? - person XMen; 21.03.2011
comment
все в initComponent: просто извлеките определение store и pagingtoolbar из config и создайте их раньше. затем в config ссылается на них с помощью store: store, bbar: paging_toolbar. Вам не нужно ничего инкапсулировать в 'config', вы можете создать объект раньше, если вам нужно ссылаться на них в нескольких объектах (хранилище будет использоваться в PagingToolbat и Grid) - person jujule; 21.03.2011
comment
хорошо, теперь счет идет правильно, но данные не поступают должным образом. Предположим, у меня есть 24 записи, а размер страницы равен 5, поэтому 5 страниц идут правильно, а первая страница отображает 1-23, но она должна отображать только 1-5, что мне делать? - person XMen; 21.03.2011
comment
в вашем магазине должны быть следующие параметры: {start: 0, limit: 5}, и ваш сервер будет использовать их для возврата хороших строк - person jujule; 21.03.2011
comment
посмотрите на этот вопрос stackoverflow.com/questions/5375377/ - person XMen; 21.03.2011