Saltar al contenido

ExtJS Infinite Scroll Grid con filtros y clasificación remotos

Posterior a investigar en diferentes repositorios y páginas webs al terminar hemos dado con la resolución que te compartiremos aquí.

Solución:

¡ÉXITO! Tengo un desplazamiento infinito trabajando con un filtro remoto y una clasificación remota (esto está en 4.1 beta 2, pero como estaba obteniendo los mismos errores en 4.02a y 4.0.7, imagino que también los resolvería). Básicamente, solo tuve que agregar algunas anulaciones en mi código.

No he hecho pruebas en otros navegadores, pero lo tengo funcionando en FF. Aquí están las anulaciones que estoy usando:

Ext.override(Ext.data.Store, 

    // Handle prefetch when all the data is there and add purging
    prefetchPage: function(page, options, forceLoad) ,

    // Fixes too big guaranteedEnd and forces load even if all data is there
    doSort: function() 
        var me = this;
        if (me.buffered) 
            me.prefetchData.clear();
            me.prefetchPage(1, 
                callback: function(records, operation, success) 
                    if (success) 
                        guaranteeRange = records.length < 100 ? records.length : 100
                        me.guaranteedStart = 0;
                        me.guaranteedEnd = 99; // should be more dynamic
                        me.loadRecords(Ext.Array.slice(records, 0, guaranteeRange));
                        me.unmask();
                    
                
            , true);
            me.mask();
        
    
);   

Ext.override(Ext.ux.grid.FiltersFeature, 

    onBeforeLoad: Ext.emptyFn,

    // Appends the filter params, fixes too big guaranteedEnd and forces load even if all data is there
    reload: function() 
        var me = this,
            grid = me.getGridPanel(),
            filters = grid.filters.getFilterData(),
            store = me.view.getStore(),
            proxy = store.getProxy();

        store.prefetchData.clear();
        proxy.extraParams = this.buildQuery(filters);
        store.prefetchPage(1, 
            callback: function(records, operation, success) 
                if (success) 
                        guaranteeRange = records.length < 100 ? records.length : 100;
                        store.guaranteedStart = 0;
                        store.guaranteedEnd = 99; // should be more dynamic
                        store.loadRecords(Ext.Array.slice(records, 0, guaranteeRange));
                    store.unmask();
                
             
        , true);
        store.mask();
    
);

Mi tienda está configurada así:

// the paged store of account data
var store = Ext.create('Ext.data.Store', 
    model: 'Account',
    remoteSort: true,
    buffered: true,
    proxy: 
        type: 'ajax', 
        url: '../list?name=accounts', //<-- supports remote filter and remote sort
        simpleSortMode: true,
        reader: 
            type: 'json',
            root: 'rows',
            totalProperty: 'total'
        
    ,
    pageSize: 200
);

la grilla es:

// the infinite scroll grid with filters
var grid = Ext.create('Ext.grid.Panel', 
    store: store,
    viewConfig: 
        trackOver: false,
        singleSelect: true,
    ,
    features: [
        ftype: 'filters',
        updateBuffer: 1000 // trigger load after a 1 second timer
    ],
    verticalScrollerType: 'paginggridscroller',
    invalidateScrollerOnRefresh: false,         
    // grid columns
    columns: [columns...],
);

Además, la carga inicial debe hacerse así (no solo store.load()):

store.prefetch(
    start: 0,
    limit: 200,
    callback: function() 
        store.guaranteeRange(0, 99);
    
);    

Su respuesta proporcionó la dirección correcta, modifiqué su código de

store.loadRecords(Ext.Array.slice(records, 0, count));

para

store.loadRecords(Ext.Array.slice(records, 0, records.length));

Esto solucionó un problema de su filtro anterior que devolvía resultados vacíos. Después de insertar este cambio, funcionaba correctamente.

Al final de todo puedes encontrar las explicaciones de otros creadores, tú aún tienes el poder mostrar el tuyo si te apetece.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *