ExtJS 4.1無限グリッドスクロールはloadDataを使用してダイナミックストアで動作しません

Question

最初のグリッドパネルをタブにロードしてからloadData（）関数を使用してデータをストアにロードする必要がありますが、現在は無限グリッドスクロールそれと。 は、loadDataの後に飛んで無限のスクロールをストアに統合する方法です。 私はExtJS 4.1を使用しています。 私を助けてください.... ここで私は試してみましたが動作していないコントローラとグリップビューパネルで私の現在のスクリプトを表示しています。以下のように

コントローラースクリプトに：

上記のスクリプトで

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); 

、私はAjax呼び出しの応答を得れば、tabParamsでグリッドパネルを追加し、グリッドのフィールドと列を設定し、最後になりますgridConfigのPARAMを使用してデータを渡しますグリッドにグリッドデータを供給します。私も扱っている

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); 
    } 
}); 

開始：以下のようにスクリプト=>http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.js

私のグリッドパネルのスクリプトが含まれ、上記ページの http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html

：私は、以下の参考例によりグリッドパネルの設定を試してみましたサーバー側のクエリから制限しますが、グリッドのpageSizeプロパティが100であり、ensureRange関数の呼び出しパラメータが0,99であれば、一度にスクロールするだけでAJAX要求を送信しません.0,299を増やすと同時に3回AJAX呼び出しが発生します（0,100）、（100,200）、（2） 00,300）、最初のajax呼び出しのみのグリッド上のデータを表示し、垂直スクロールでは起動しません。

私はExtJsの新しい学習者ですので、お手伝いください... ありがとうございます。

Answer 1

リモート/バッファリングされたストアとグリッドの実装ではstore.loadDataを呼び出すことはできず、グリッドにはこの新しいデータが反映されます。

代わりにstore.loadに電話する必要があります。

例1この例store.load

を用いて緩衝ストアstore.on("load")イベントの発火を示します。 store.loadData

を使用して

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) 

例2、静的店あなたはstore.on("load")イベントが発火しないこと。この例から見ることができます。私の経験から

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)