View Full Version : Hiding records in Store and display on grid

24 Jul 2013, 2:11 PM
Currently what I have:

One long list of months and their Sales Qty.

What I want to achieve:

I want only 6 rows on the grid and then the remaining months adjacent first ones and so on.

How I plan to implement:
Number of Total Rows in Store : 24
Total Rows on Grid: 6
Number of Grids: 4

I have 4 stores A, B, C, D (exact duplicates) using same model. On the View, I have 4 grids GridA and GridB. GridC, GridD using A and B, C and D respectively.

Now I want to filter and hide rows on grids accordingly:
1 7 13 19
2 8 14 20
3 9 15 21
4 10 16 22
5 11 17 23
6 12 18 24

How do I achieve this?

Is this the best way I can do this? I dont want to modify my server messaging. Is there any other way that I could do this.

Thanks. Appreciate any assistance.

24 Jul 2013, 11:20 PM
I dont know if there is a better way to do it but for filtering, you can use filter function (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.util.Filter):

var monthIdFilter = new Ext.util.Filter({
filterFn: function(item) {
return item.data.monthId > 6; // you have to create a different function with different conditions here for each store.


24 Jul 2013, 11:52 PM
One other possibility is that since you are using independent stores for each grid, you can load one main store which contains all records, sort them on load event and push e.g. first 6 records into storeA and so on:

store.on('load', function() {
store.sort('id', 'ASC');
var allRecords = store.getRange();
for(var i=0; i<allRecords.length; i++)
if(allRecords[i].get('id') < 6)
else if...

25 Jul 2013, 5:42 PM
Thanks for your answer mate. I had no patience to wait for a day, so I ended up changing my server response and modified my model accordingly to achieve that. But your suggestion is way to simpler and involves less effort (assuming it will do the job that I want to achieve, worth a try).