タブに最初のグリッド パネルをロードし、正常に動作している 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の初心者なので、助けてください...どうもありがとう..高度な.