9

タブに最初のグリッド パネルをロードし、正常に動作している loadData() 関数を使用してデータをストアにロードする必要がありますが、無限のグリッド スクロールを統合する必要があります。

loadData を store.. にした後、その場で無限スクロールを統合する方法はありますか? 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 パラメータを使用してデータを渡し、最後のステートメントでグリッド データをグリッドに提供します。参考例に従ってグリッドパネルの設定を試してみました: http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html

上記のページに含まれるスクリプト => http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.js

以下のように私のグリッドパネルスクリプト：

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

サーバー側クエリからの開始と制限も処理しましたが、グリッドの pageSize プロパティが 100 で、 GuaranteeRange 関数呼び出しパラメーターが 0,99 の場合、0,299 を増やした場合に発生するため、一度に発生したスクロールで ajax リクエストを送信しません。一度に3つのajax呼び出し（0,100）、（100,200）、および（200,300）が、最初のajax呼び出しのみグリッドにデータを表示し、垂直スクロールでは発生しません。

私はExtJの初心者なので、助けてください...どうもありがとう..高度な.

4

1 に答える 1