1 Attachment(s)
LocalPagingProxy an alternative to PagingMemoryProxy
This proxy embeds a Store to handle the local paging of remote data. It isn't finished yet and it is based off of the ux.PagingMemoryProxy. Currently it will hit a server and get remote data which it will cache in an internal store. I started this because the PagingMemoryProxy reparses data every time it switches pages and it makes IE8 very slow with a decent amount of data. It still needs a lot of work...
GitHub Repo here
Proxy Code:
Code:
Ext.define('Ext.ux.data.proxy.LocalPagingProxy', {
extend: 'Ext.data.proxy.Memory',
alias: 'proxy.localpagingproxy',
requires: [
'Ext.data.Store'
],
constructor: function(config) {
var me = this;
this.callParent(arguments);
me.recordCache = new Ext.data.Store({
proxy: config.serverProxy,
model: config.serverProxy.model
});
me.refreshRecordCache = true;
},
create: Ext.emptyFn,
update: Ext.emptyFn,
destroy: Ext.emptyFn,
read : function(operation, callback, scope){
var me = this;
if(me.refreshRecordCache){
me.recordCache.load({
params: operation.params,
callback: function(){
me.handleRead(operation, callback, scope);
}
});
me.refreshRecordCache = false;
}else{
me.handleRead(operation, callback, scope);
}
},
handleRead: function(operation, callback, scope){
var me = this, result = {
total: me.recordCache.getTotalCount()
},
sorters, filters, sorterFn, records;
scope = scope || this;
// "remote" filtering
filters = operation.filters;
if (filters.length > 0) {
me.recordCache.filter(filters);
result.totalRecords = result.total = result.records.length;
}else{
if(me.recordCache.isFiltered()){
me.recordCache.clearFilter();
}
}
// "remote" sorting
sorters = operation.sorters;
if (sorters.length > 0) {
me.recordCache.sort(sorters);
}
// paging (use undefined cause start can also be 0 (thus false))
if (operation.start !== undefined && operation.limit !== undefined) {
result.records = me.recordCache.getRange(operation.start, operation.start + (operation.limit - 1));
}else{
result.records = me.recordCache.getRange();
}
result.count = result.records.length;
Ext.apply(operation, {
resultSet: result
});
operation.setCompleted();
operation.setSuccessful();
Ext.Function.defer(function () {
Ext.callback(callback, scope, [operation]);
}, 10);
}
});
usage:
Code:
Ext.define('LocalPagingDemo.store.LocalPaging', {
extend: 'Ext.data.Store',
requires: [
'LocalPagingDemo.model.SimpleModel',
'Ext.ux.data.proxy.LocalPagingProxy'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'LocalPaging',
model: 'LocalPagingDemo.model.SimpleModel',
pageSize:5,
proxy: new Ext.ux.data.proxy.LocalPagingProxy({
serverProxy: new Ext.data.proxy.Ajax({
model: 'LocalPagingDemo.model.SimpleModel',
url: 'data/testData.json',
reader:{
type:'json',
successProperty:'success',
root:'data'
}
})
}),
remoteSort: true,
remoteFilter: true
}, cfg)]);
}
});
here is a usage example:
Attachment 33415
Demo here
the demo is using the 4.02 version of ExtJs from cachefly so the paging toolbar override (making the refresh button hit the server for new data) doesn't work. But the source is there so you can take a look at it to see what it is doing.
