ArtSoftSolutions

un articol scris de Robert

Gridurile ExtJS ne ofera o gama foarte variata de functionalitati native. Printre ele, se numara si filtrarea dupa valori ale anumitor coloane. Desi neintuitiva, aceasta metoda are limitarile ei - si anume se limiteaza la valorile din grid (sau cu alte cuvinte, criteriul nostru de filtrare ar trebui sa fie o coloana in grid).

O problema interesanta apare atunci cand incercam sa aplicam un filtru extern asupra store-ului gridului. Spre exemplu, avem un grid cu utillizatori (nume, prenume, id, nivel si domeniu) si dorim sa aplicam un filtru dintr-un combo-box dupa nivelul angajatului.

Desigur, am fi putut activa filtrarea nativa ExtJS, dar acest exemplu se doreste a fi o alternativa la filtrarea nativa ExtJS. Sa presupunem ca intr-un alt exemplu, am fi dorit sa filtram inregistrarile din grid dupa un alt criteriu, care nu am fi dorit sa fie in grid.

Am gasit pe Internet mai multe exemple care insa nu erau tocmai potrivite. Problema principala era ca la schimbarea paginii, sau refresh din bara de jos a grid-ului, filtrarea era pierduta.

Exemplul 1

myStore = new Ext.data.Store({
        url: 'feeds/market.php',
        baseParams: {marketid: '1', count: '30'},
        method: 'GET',
        reader: new Ext.data.XmlReader(
                {record: 'Item', id: 'id', totalRecords: '@total' }, 
                [{name: 'runner', mapping: 'ItemAttributes > runner'}, 'back', 'lay', 'graph']
        )
});

Solutia propusa de acest exemplu era urmatoarea:

myStore.load({ params: {marketid: '20184780', count: '30'}});

Problema era ca parametrii specificatii in baseParams vor fi transmisi cu aceeasi valoare la fiecare request, doar parametrii din load sunt cei care isi pot schimba valoarea, de fiecare data cand facem un nou load. Dar, la schimbarea paginii sau la refresh, filtrarea era pierduta.

Exemplul 2

myStore = new Ext.data.Store({ 
        url: 'feeds/ladder.php',
        .....
});

Am fi putut folosi setURL pentru a apela un URL de genul ladder.php?something=1&somthing=2, dar nici aceasta metoda nu ne-a ajutat.

Exemplul 3

Oarecum legat de primul exemplu, dar fara baseParams, nici aceasta modalitate nu ne-a permis pastrarea filtrului pentru grid-ul extJS la paginare si la refresh

grid.store.load({params:{url: my_url}});

Exemplul 4

Un alt exemplu gasit pe Internet era cu folosirea urmatorului cod:

myStore.proxy.conn.url = '/new/url'; 
mystore.load(); //mystore.reload(); 

Nu am reusit ceea ce ne propusesem nici folosind aceasta modalitate.

Solutia

Solutia salvatoare a fost folosirea evenimentului beforeLoad a store-ului:

myStore.on('beforeload', function(store){
        store.baseParams = {filter: myFilter};
});

Si... Evrika, a mers!

Numai ca dupa ceva timp am constatat ca aceasta modalitate folosita intr-un grid ExtJS care folosea si extensia SearchField, pierdea criteriul de cautare. Solutia gasita pentru aceasta a fost:

var vSearch = new Ext.ux.form.SearchField({
    store: anotherStore,
    width: 150
});

myStore.on('beforeload', function(store){
        mySearchPhrase = vSearch.getRawValue();
        store.baseParams = {filter: myFilter, query: mySearchPhrase};
});

Un mic artificiu care ne-a permis sa integram un filtru extern in grid, fara sa folosim filtrarea pe coloane a ExtJS-ului.