我正在使用EXT JS 5.1，在我的应用程序中有一个网格面板，它从grails服务器获取数据。我需要从客户端分页数据，即应该立即检索来自服务器的所有数据，然后单击＆＃34; next＆＃34;或＆＃34; prev＆＃34;，它不应再次去服务器获取数据。相反，它应该获取本地数据。有没有办法实现这一目标。
我曾尝试过两家商店。一个商店从具有AJAX代理的服务器获取数据，另一个商店从代理作为MEMORY分配给网格的另一个商店获取数据。
来自AJAX代理商店的数据被复制到内存代理商店，并且内存代理商店被分配给网格，以便每次服务器都不被命中。
要加载数据，我使用的是loadRawData。但这会破坏pagingtoolbar配置。我尝试重写loadRawData来重置存储的配置，但是分页工具栏仍然没有显示正确的结果。
以下是代码：
Ext.define('MVC.model.WorkOrderStatic', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Selected', type: 'boolean' },
{ name: 'workOrderBatchId', type: 'string' },
{ name: 'territory', type: 'string' },
{ name: 'apo', type: 'string' },
{ name: 'eventRefId', type: 'string' },
{ name: 'product', type: 'string' },
{ name: 'Received', type: 'string' },
{ name: 'DueDate', type: 'string' },
{ name: 'priority', type: 'string' },
{ name: 'AssignedTo', type: 'string' },
{ name: 'Ready', type: 'boolean' },
{ name: 'InProgress', type: 'boolean' },
{ name: 'partial', type: 'boolean' },
{ name: 'Complete', type: 'boolean' },
{ name: 'hold', type: 'boolean' },
{ name: 'account', type: 'string' },
{ name: 'id', type: 'string' }
],
idProperty: 'id'
});
Ext.define('MVC.model.WorkOrder', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Selected', type: 'boolean' },
{ name: 'workOrderBatchId', type: 'string' },
{ name: 'territory', type: 'string' },
{ name: 'apo', type: 'string' },
{ name: 'eventRefId', type: 'string' },
{ name: 'product', type: 'string' },
{ name: 'Received', type: 'string' },
{ name: 'DueDate', type: 'string' },
{ name: 'priority', type: 'string' },
{ name: 'AssignedTo', type: 'string' },
{ name: 'Ready', type: 'boolean' },
{ name: 'InProgress', type: 'boolean' },
{ name: 'partial', type: 'boolean' },
{ name: 'Complete', type: 'boolean' },
{ name: 'hold', type: 'boolean' },
{ name: 'account', type: 'string' },
{ name: 'id', type: 'string' }
],
idProperty: 'id'
});
var datar = '';
var jsonDataEncode= '';
var workOrderData = '';
//var workOrderStore = Ext.data.StoreManager.lookup('WorkOrder');
var workOrderStaticStore = Ext.create('Ext.data.Store', {
requires : [
'MVC.model.WorkOrderStatic',
],
storeId: 'workOrderStatic',
model : 'MVC.model.WorkOrderStatic',
pageSize : 4,
//buffered: true,
//autoLoad: false,
//autoLoad: true,
//data: workOrderData,
//data:[],
autoLoad: {params: {start: 0, limit: 40}},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'workOrders'
},
enablePaging : true
}/*,
listeners:{
beforeload: function(store, operation, options){
alert("In before load of workOrderStatic");
console.log("In before load of workOrderStatic");
console.log(workOrderData);
}//End of beforeLoad listener
}*/
});//end of workOrderStatic store
var grid = Ext.create('Ext.grid.Panel', {
alias: 'app.gridPanelAlias',
//extend : 'Ext.grid.Panel',
xtype : 'WorkOrderView',
title : 'Work Order Batches',
//store : 'WorkOrder',
//store: 'WorkOrderStatic',
//store: Ext.data.StoreManager.lookup('workOrderStatic'),
//bind: '{workOrderStatic}',
store : workOrderStaticStore,
multiSelect: true,
requires: ['Ext.ux.CheckColumn',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
// 'Ext.ModelManager',
],
loadMask: true,
columns: [
{text:"id",width: 15,dataIndex: 'id', sortable: true},
{text: "Work Order Batch", width: 55, dataIndex: 'workOrderBatchId', sortable: true},
{text: "Territory", width: 35, dataIndex: 'territory', sortable: true}
],
listeners: {
render: function(){
alert("In render of grid");
}
},
dockedItems:
[
{ xtype: 'pagingtoolbar',
dock: 'bottom',
displayMsg: '{0} - {1} of {2}',
emptyMsg: 'No data to display',
store: workOrderStaticStore,
//store: 'woStatic',
//store: Ext.StoreMgr.lookup('WorkOrderStatic'),
displayInfo: true
}
],
forceFit: true,
height:210,
split: true,
region: 'north'
});
var workOrderStore = Ext.create('Ext.data.Store', {
requires : [
'MVC.model.WorkOrder'
],
storeId : 'WorkOrder',
model : 'MVC.model.WorkOrder',
pageSize : 6,
//buffered: true,
remoteSort: false,
//autoload: false,
autoLoad: false,
proxy: {
type: 'ajax',
url: '/CommandAndControl/workOrderList/getReadyWorkOrders',
actionMethods :{
read : 'POST'
},
reader: {
type: 'json',
rootProperty: 'workOrders'
}
},
listeners:{
load:function(store, record, success, opts){
var responseText = store.proxy.reader.rawData;
var responseString = Ext.encode(responseText);
}
}
});
workOrderStore.load({
scope : this,
callback: function(records, operation, success) {
datar= new Array();
records1 = workOrderStore.getRange();
console.log("length of records ");
console.log(records1.length);
for (var i = 0; i < records1.length; i++) {
datar.push(records1[i].data);
}//End of for loop
jsonDataEncode = Ext.util.JSON.encode(datar);
console.log("datar");
console.log(datar);
console.log("jsonDataEncode");
console.log(jsonDataEncode);
var jsonEncodeData= jsonDataEncode.replace(/^"(.*)"$/, '$1');
console.log("replaced json encoded data");
console.log(jsonEncodeData);
var bracket1= "{";
var bracket2= "}";
workOrderData = bracket1.concat("workOrders").concat(":").concat(jsonDataEncode).concat(bracket2);
workOrderData=Ext.JSON.decode(workOrderData);
console.log("data1 data");
console.log(workOrderData);
workOrderStaticStore.loadRawData(workOrderData);
//this.reconfigure(workOrderStaticStore, columns);
//grid.reconfigure(workOrderStaticStore, workOrderData.columns);
/*var result=workOrderStaticStore.proxy.reader.read(workOrderData);
var records=result.records;
workOrderStaticStore.add(records);
workOrderStaticStore.load({add:true,
params:{
start:0,
limit:4
}
});*/
//workOrderStaticStore.loadRawData(workOrderData, true);
//Ext.StoreMgr.lookup('WorkOrderStatic').load();
}//End of call back
});//End of workorderstore
Ext.override(Ext.data.Store, {
loadRawData : function(data, append){
var me = this,
result = me.proxy.reader.read(data),
records = result.records;
if (result.success) {
me.totalCount = result.total;
console.log("total count");
console.log(me.totalCount);
me.loadRecords(records, { addRecords: append });
//me.currentPage = 2;
me.fireEvent('load', me, records, true);
}
}
});
Ext.define("MVC.view.WorkCenterPanel",{
extend: "Ext.panel.Panel",
alias: 'widget.workcenterpanel',
requires : [
'Ext.grid.Panel','MVC.GridPanel','MVC.controller.WorkCenterPanel'
],
requires: 'MVC.view.Device',
items:
[
grid
,
{
xtype: 'devicepanel'
}
]
});
提前致谢!!