ext js store, manipulation of data (linq type queries)

Question

I am working on my first Ext JS project and have my source data downloaded from a web server held in a store. Now I want to have various grids all show some variation of that source data. For example, grid 1 would be the source data grouped by 1 particular column. Grid 2 would be grouped by a particular column, and where column X = 'variable'. So on and so on.

I am coming from a c# background working in WPF. So normally I would use observable collections, and run LINQ on the observable collection to form a new observable collection, then bind that new collection to my grid.

My question is, how can I run LINQ type queries on stores in EXT JS?

Alexander Alexander · Accepted Answer · 2016-04-13T14:04:13

You can run LINQ type queries on stores in ExtJS: You can easily get a Collection from a store using the query or queryBy method.

But you can't work like this for your grids, because grids can't run solely on collections, they need a store each. You wouldn't want to use LINQ type queries for these stores.

If you are using ExtJS6, you can look into ChainedStore. You can bind each grid to a ChainedStore which has your data store as the source. Each ChainedStore can be filtered, sorted and grouped independently from the source and from other stores, by using the sort(), group() and addFilter() functions on the respective store.

If you are using an earlier version, you have to use multiple stores and copy all data from the main store manually. Please be aware that store.add() takes an array of records, not a collection. Instead of store.add(collection), use store.add(collection.getRange()). The getRange() function will return an array that contains all items in the collection.

To answer your question from the comment: what if I need to do something as simple as create a new store, from store1, group everything by column1, and sum column2?

In ExtJS6, if you want to show the grouping and the sum in a grid, that would be something along:

var store2 = Ext.create('Ext.data.ChainedStore',{
    source:store1, // use the data from the other store.
    grouper:{
        property:'someTestField' // grouping is done inside this store.
    }
});

Ext.create('Ext.grid.Panel',{
    store:store2,
    features:[{
        ftype:'groupingsummary' // a summary row for each group is provided by this
    }],
    columns:[{
        xtype:'numbercolumn'
        dataIndex: 'someTestField'
        summaryType: 'sum' // this column should have the sum in the summary row.
    }]
})

Untested and without warranty. If you want to do it without the grid, just calculate the sum, that would have to be done manually like this:

var sums = {};
store1.getGroups().each(function(group,i) {
    sums[i] = 0;
    group.each(function(record) {
        sums[i] += record.get(propertyName);
    });
});

ext js store, manipulation of data (linq type queries)

1 Answers