Threaded View

  1. #1
    Sencha Premium Member
    Join Date
    Dec 2009
    Location
    Rhode Island
    Posts
    231
    Vote Rating
    23
    dmulcahey will become famous soon enough dmulcahey will become famous soon enough

      0  

    Default LocalPagingProxy an alternative to PagingMemoryProxy

    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:
    LocalPagingExample.zip

    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.
    Last edited by dmulcahey; 3 Apr 2012 at 3:28 AM. Reason: added repo