ExtJS 4.1 Scorrimento a griglia infinita non funziona con negozio dinamico usando loadData

Question

Devo caricare il primo pannello della griglia sulla scheda e poi caricare i dati nell'archivio usando la funzione loadData() che funziona bene, ma ora devo integrare lo scorrimento a griglia infinito con esso. è un modo per integrare lo scrolling infinito al volo dopo loadData nello store ..? Sto usando ExtJS 4.1. Per favore aiutatemi .... Qui sto mostrando il mio script corrente nel pannello di controllo del grip e del controllo in cui ho provato ma non funziona.

controller Script come di seguito:

var c = this.getApplication().getController('Main'), 
         data = c.generateReportGridConfiguration(response,true), 
         tabParams = { 
          title: 'Generated Report', 
          closable: true, 
          iconCls: 'view', 
          widget: 'generatedReportGrid', 
          layout: 'fit', 
          gridConfig: data 
         }, 
         generatedReportGrid = this.addTab(tabParams); 

generatedReportGrid.getStore().loadData(data.data); 

Su script di cui sopra, una volta che ottengo risposta chiamata Ajax, aggiungendo pannello grigliato con tabParams e passato dati con gridConfig param che sarà istituito campi e le colonne per griglia e quindi ultima fornitura di dati della griglia di istruzione alla griglia. Ho provato le impostazioni del pannello griglia seguendo l'esempio di riferimento: http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html

sulla pagina di cui sopra, inclusi script =>http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.js

La mia griglia Script Panel come di seguito:

Ext.define('ReportsBuilder.view.GeneratedReportGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.generatedReportGrid', 
    requires: [ 
     'ReportsBuilder.view.GenerateViewToolbar', 
     'Ext.grid.*', 
     'Ext.data.*', 
     'Ext.util.*', 
     'Ext.grid.PagingScroller', 
     'Ext.grid.RowNumberer',  
    ], 
    initComponent: function() { 
     Ext.define('Report', {extend: 'Ext.data.Model', fields: this.gridConfig.fields, idProperty: 'rowid'}); 

     var myStore = Ext.create('Ext.data.Store', {model: 'Report', groupField: 'name', 

      // allow the grid to interact with the paging scroller by buffering 
       buffered: true, 
       pageSize: 100, 
       autoSync: true, 
       extraParams: { total: 50000 }, 
       purgePageCount: 0, 
       proxy: { 
        type: 'ajax', 
        data: {}, 
        extraParams: { 
         total: 50000 
        }, 
        reader: { 
         root: 'data', 
         totalProperty: 'totalCount' 
        }, 
       // sends single sort as multi parameter 
       simpleSortMode: true 
       } 
     }); 
     Ext.apply(this, { 
       dockedItems: [ 
        {xtype: 'generateviewToolbar'} 
       ], 
       store: myStore, 
       width:700, 
       height:500, 
       scroll: 'vertical', 
       loadMask: true, 
       verticalScroller:'paginggridscroller', 
       invalidateScrollerOnRefresh: false, 
       viewConfig: { 
        trackOver: false, 
        emptyText: [ 
         '<div class="empty-workspace-bg">', 
         '<div class="empty-workspace-vertical-block-message">There are no results for provided conditions</div>', 
         '<div class="empty-workspace-vertical-block-message-helper"></div>', 
         '</div>' 
        ].join('') 
       }, 
       columns: this.gridConfig.columns, 
       features: [ 
        {ftype: 'groupingsummary', groupHeaderTpl: '{name} ({rows.length} Record{[values.rows.length > 1 ? "s" : ""]})', enableGroupingMenu: false} 
       ], 
       renderTo: Ext.getBody() 
     }); 
    // trigger the data store load 
    myStore.guaranteeRange(0, 99); 
    this.callParent(arguments); 
    } 
}); 

ho anche gestito avvio e limita la query lato server ma non invierà una richiesta Ajax sullo scroll appena attivato in quanto la proprietà pageSize nella griglia è 100 e i parametri call di garanziaRange function sono 0,99 se aumenterò 0,299 allora verrà emesso tre chiamate ajax contemporaneamente (0,100), (100,200) e (2 00.300) ma mostrando i dati sulla griglia solo per la prima chiamata ajax e non attivati ​​sullo scrolling verticale.

Come, sono nuovo studente su ExtJs, quindi per favore aiutatemi ... Grazie mille..in avanzato.

Answer 1

Non è possibile chiamare store.loadData con un archivio remoto/bufferizzato e un'implementazione della griglia e aspettarsi che la griglia rifletta questi nuovi dati.

Invece, è necessario chiamare store.load.

Esempio 1, magazzini tamponata utilizzando store.load

Questo esempio mostra la cottura store.on("load") evento.

http://codepen.io/anon/pen/XJeNQe?editors=001

;(function(Ext) { 
    Ext.onReady(function() { 
    console.log("Ext.onReady") 

    var store = Ext.create("Ext.data.Store", { 
     fields: ["id", "name"] 
     ,buffered: true 
     ,pageSize: 100 
     ,proxy: { 
     type: 'rest' 
     ,url: '/anon/pen/azLBeY.js' 
     reader: { 
      type: 'json' 
     } 
     } 
    }) 
    store.on("load", function(component, records) { 
     console.log("store.load") 
     console.log("records:") 
     console.log(records) 
    }) 

    var grid = new Ext.create("Ext.grid.Panel", { 
     requires: ['Ext.grid.plugin.BufferedRenderer'] 
     ,plugins: { 
     ptype: 'bufferedrenderer' 
     } 
     ,title: "people" 
     ,height: 200 
     ,loadMask: true 
     ,store: store 
     ,columns: [ 
     {text: "id", dataIndex: "id"} 
     ,{text: "name", dataIndex: "name"} 
     ] 
    }) 
    grid.on("afterrender", function(component) { 
     console.log("grid.afterrender") 
    }) 
    grid.render(Ext.getBody())  

    store.load() 
    }) 
})(Ext) 

Esempio 2, archivio statico utilizzando store.loadData

Si può vedere da questo esempio che l'evento store.on("load") non si attiva mai.

http://codepen.io/anon/pen/XJeNQe?editors=001

;(function(Ext) { 
    Ext.onReady(function() { 
    console.log("Ext.onReady") 

    var store = Ext.create("Ext.data.Store", { 
     fields: ["id", "name"] 
     ,proxy: { 
     type: 'rest' 
     ,reader: { 
      type: 'json' 
     } 
     } 
    }) 
    store.on("load", function(component, records) { 
     console.log("store.load") 
     console.log("records:") 
     console.log(records) 
    }) 

    var grid = new Ext.create("Ext.grid.Panel", { 
     title: "people" 
     ,height: 200 
     ,store: store 
     ,loadMask: true 
     ,columns: [ 
     {text: "id", dataIndex: "id"} 
     ,{text: "name", dataIndex: "name"} 
     ] 
    }) 
    grid.on("afterrender", function(component) { 
     console.log("grid.afterrender") 
    }) 
    grid.render(Ext.getBody()) 

    var data = [ 
     {'id': 1, 'name': 'Vinnie'} 
     ,{'id': 2, 'name': 'Johna'} 
     ,{'id': 3, 'name': 'Jere'} 
     ,{'id': 4, 'name': 'Magdalena'} 
     ,{'id': 5, 'name': 'Euna'} 
     ,{'id': 6, 'name': 'Mikki'} 
     ,{'id': 7, 'name': 'Obdulia'} 
     ,{'id': 8, 'name': 'Elvina'} 
     ,{'id': 9, 'name': 'Dick'} 
     ,{'id': 10, 'name': 'Beverly'} 
    ] 

    store.loadData(data) 
    }) 
})(Ext)