wie Seitenumbrüche in das ext-grid funktioniert

Ich bin mit diesem Artikel von Architektur http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/

hier ist meine Application.ResellerIroGrid.js
die pagination-buttons sind im kommen aber keine. der Seiten und pageno. der nicht kommt .

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);
InformationsquelleAutor XMen | 2011-03-21
  1. 0

    Müssen Sie ein totalProperty Attribut in Ihrem Geschäft oder JsonReader config und diese Eigenschaft geschickt werden müssen, von ther-server JSON.

    ZB :

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

    Auch nicht fest params in der store-url-Eigenschaft. Sollten Sie die baseParams config-option für diese :

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

    Und natürlich sollten Sie eine PagingToolbar erklärt für das Gitter in der 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
});
    • ich geändert, um totalcount-Eigenschaft und änderte meine json-Antwort, wie das {"reseller":[],"totalcount":10}, aber immer noch mein Paginierung wird nicht kommen , und verändert die baseParams auch, aber meine Anfrage geht in der POST, warum alle Möglichkeiten, die erste ich will lösen das problem der Paginierung
    • totalcount mit einem Großbuchstaben C ? ich meine das gleiche wie in der Eigenschaft
    • aber in der json-Antwort m mit kleinen und in meinem code von Shop-m mit kleiner c , also ist es ok ?
    • ja, es sollte. aber nur bearbeitet meine post mit der wichtigste Teil 😉
    • diese Sache bereits in meiner Datei in der Frage, überprüfen Sie bitte, was ist falsch in meiner Datei in der bbar ich habe den pagingtoolbar
    • ja. im nicht sicher, wenn " dies.store' erhältlich sein wird, zu dieser Zeit die Art und Weise, erklären Sie. Versuchen Sie zuerst deklarieren Sie das Geschäft, dann die pagingtoolbar, und dann das Gitter in der initComponent.
    • wie ich diese Architektur, dies zu tun ?
    • alle in der initComponent : einfach extrahieren Sie die store-und pagingtoolbar definition von config und erstellen Ihnen vor. dann in der Konfiguration, die Sie verweist wih store:store, bbar:paging_toolbar. Sie nicht brauchen, um kapselt alles, was in der 'config' können Sie das Objekt erstellen, bevor Sie, wenn Sie auf Sie verweisen müssen, die in mehrere Objekte (der store wird in PagingToolbat und Gitter)
    • okay cool, jetzt der Graf kommt die richtige, aber die Daten kommen nicht ordnungsgemäße bedeutet angenommen ich habe 24 Einträge und Seiten-Größe ist 5, also 5 Seiten kommen rechts , und die erste Seite wird angezeigt 1-23 aber es sollte nur die Anzeige der 1-5 was soll ich tun ?
    • Ihr Shop sollte diese params : {start:0, limit:5} und Sie Ihren server nutzen Sie zur Rücksendung die gute Zeilen
    • bitte schauen Sie auf diese Frage stackoverflow.com/questions/5375377/...

    InformationsquelleAutor jujule
Schreibe einen Kommentar