PDA

View Full Version : On sort of a column in grid should do similar sorting on other grids in the page



agarapati
19 May 2015, 3:24 AM
I have three Grids in my screen which are loaded from same store. I have requirement such that when a sort is applied on any one grid column the same sort should apply on other two grids, no clue where to start.

The three Grids columns are as below

1. Product Name | Product Cost | Download | Field1 | Field2 | Field3 | Field4

2. Product Name | Product Cost | Download | Field5 | Field6 | Field7 | Field8

3. Product Name | Product Cost | Download | Field9 | Field10 | Field11 | Field12

When sorting is applied on Field1 Ascending in Grid one, the Products display order changes; The same order the products should be displayed in other girds.


Model fields are as below:-



fields: [
{
name: 'product_name',
type:'string'
}, {
name: 'product_cost',
type:'string'
}, {
name: 'download',
type:'string'
}, {
name: 'filed1',
type:'string'
},, {
name: 'filed2',
type:'string'
},, {
name: 'filed3',
type:'string'
},, {
name: 'filed4',
type:'string'
},, {
name: 'filed5',
type:'string'
},, {
name: 'filed6',
type:'string'
},, {
name: 'filed7',
type:'string'
},, {
name: 'filed8',
type:'string'
},, {
name: 'filed9',
type:'string'
},, {
name: 'filed10',
type:'string'
},, {
name: 'filed11',
type:'string'
},, {
name: 'filed12',
type:'string'
},
]




Controller Code to load data in grid:



this.store = Ext.create('Store', {
model: 'model',
sorters: [{
property: 'Name',
direction: 'ASC'
}],
proxy: {
type: 'ajax',
url: 'url,
reader: {
root: 'data'
}
}
});
var options = [];
this.store.each(function(item) {
options.push(item);
});
grid1.store.loadData(options);
grid2.store.loadData(options);
tgrid3.store.loadData(options);

jdkhamba
19 May 2015, 6:27 AM
The controller needs to listen to sortchange event from each of the grid and then based on which grid fired the event sort the other two grids.

SortChange


(http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.Panel-event-sortchange)

agarapati
19 May 2015, 6:36 AM
Used "sortchange" event on all grids to a fire a event getApplication().fireEvent('store.filter.sort', correspondingGrid.store, gridId); the event is mapped to "onSortChange" method as shown below. The code is working is fine when other two grids have no sorters applied.

Let assume I have sorted grid one on filed3 the other 2 grids are getting sorted as expected. After that if I go to grid 2 and sort any column the grid is getting sorted as per grid 2, but grid1 is not getting sorted, I try to reset the grid store using "clear" and "clearFilter". Is there a method to reset grid to initial mode or remove all sorting done on the grid





onSortChange: function(store, gridId){
var options = [];
store.each(function(item) {
options.push(item);
});
if(gridId != grid1.id){
grid1.store.clear(this);
grid1.store.clearFilter(true);
grid1.store.loadData(options);
}
if(gridId != grid2.id){
grid2.store.clear(this);
grid2.store.clearFilter(true);
grid2.store.loadData(options);
}
if(gridId != grid3.id){
grid3.store.clear(this);
grid3.store.clearFilter(true);
grid3.store.loadData(options);
}
},

jdkhamba
19 May 2015, 6:49 AM
You probably wanna clear the sorters on the store instead of the filter.

https://www.sencha.com/forum/showthread.php?148646-how-can-i-remove-the-sort-in-a-grid-panel

agarapati
19 May 2015, 7:07 AM
It worked thanks :)