PDA

View Full Version : Sort on specific cell in group



rvrdesigns
4 Sep 2009, 5:32 AM
We've got a dataset like this


date name price groupId
group1:
10/06 KL 100 1
10/06 KL 100 1
group2:
01/12 BD 50 2
02/12 BD 50 2
03/12 BD 50 2
group3:
06/11 HV 130 3

when i click on price i would like the grid to be

date name price groupId
group3:
06/11 HV 130 3
group1:
10/06 KL 100 1
11/06 KL 100 1
group2:
01/12 BD 50 2
02/12 BD 50 2
03/12 BD 50 2

when i click on date i would like the grid to be

date name price groupId
group1:
10/06 KL 100 1
11/06 KL 100 1
group3:
06/11 HV 130 3
group2:
01/12 BD 50 2
02/12 BD 50 2
03/12 BD 50 2


I don't want the sorting to be on the values inside a group.
I would like the sorting to be on a value within the group and that the highest/lowest values of the group are compared to other values of other groups.

I've tried example in http://www.extjs.com/forum/showthread.php?t=71495
but it doesn't seem to work for me.
I am using a groupingstore and JsonReader and a normal Grid.

Condor
4 Sep 2009, 6:01 AM
So, in your case:
group:group1 === price:100
group:group2 === price:50
group:group3 === price:130
(is this correct?)

rvrdesigns
4 Sep 2009, 6:06 AM
Yes there is actually only one price for each group.
I just put it there for example so you don't get a empty row value.

Condor
4 Sep 2009, 6:15 AM
In that case the price field should be the groupBy field.

The price Column would need a groupRenderer that shows the group name for the price and the GroupingView should be set to hideGroupedColumn: false.

Condor
4 Sep 2009, 6:16 AM
Or you could specify a different sortType function in the group field and reapply sorting.

rvrdesigns
7 Sep 2009, 12:28 AM
Ok here is a better example and some code.

The left grid is sorted on departureTime and grouped by a hidden field called flightId.
This flightId is important, it should always group by flightId!
The second grid is sorted on price, but here the groups are also being ordered(re-arranged) when the price-sorting is done.
How can I achieve this?

http://mtb.rvrdesigns.nl/demo/flightgrid.JPG


var tpl = new Ext.Template(
'Carrier {test}'
);

var expander1 = new Ext.ux.grid.RowExpander({
tpl: tpl
});


var groupTextTpl = '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'

var gridViewTpl1 = new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: groupTextTpl
});
var segmentData1 = {"data":[{"departureTime":"07:00","departureCityCode":"AMS","arrivalTime":"09:15","arrivalCityCode":"FCO","flightCode":"KL 1597","flightId":"1","price":"400","departureCityName":{"0":"Amsterdam"},"arrivalCityName":{"0":"Rome Fiumicino"},"departureDate":"23SEP09","arrivalDate":"23SEP09","nrOfStops":{"0":"0"},"codeShared":{"0":"0"},"equipmenetCode":"733","equipmentName":"Boeing 737-300","classCode":"M","className":"Economy","carrierName":"KLM","segmentNo":1},
{"departureTime":"10:25","departureCityCode":"AMS","arrivalTime":"12:40","arrivalCityCode":"FCO","flightCode":"KL 1601","flightId":"2","price":"200","departureCityName":{"0":"Amsterdam"},"arrivalCityName":{"0":"Rome Fiumicino"},"departureDate":"23SEP09","arrivalDate":"23SEP09","nrOfStops":{"0":"0"},"codeShared":{"0":"0"},"equipmenetCode":"73J","equipmentName":"","classCode":"M","className":"Economy","carrierName":"KLM","segmentNo":1},
{"departureTime":"12:25","departureCityCode":"AMS","arrivalTime":"14:40","arrivalCityCode":"FCO","flightCode":"KL 3401","flightId":"3","price":"","departureCityName":{"0":"Amsterdam"},"arrivalCityName":{"0":"Rome Fiumicino"},"departureDate":"23SEP09","arrivalDate":"23SEP09","nrOfStops":{"0":"0"},"codeShared":{"0":"1"},"equipmenetCode":"320","equipmentName":"Airbus A320-100\/200","classCode":"M","className":"Economy","carrierName":"KLM","segmentNo":1},
{"departureTime":"15:25","departureCityCode":"FCO","arrivalTime":"16:40","arrivalCityCode":"LHR","flightCode":"KL 3402","flightId":"3","price":"","departureCityName":{"0":"Amsterdam"},"arrivalCityName":{"0":"Rome Fiumicino"},"departureDate":"23SEP09","arrivalDate":"23SEP09","nrOfStops":{"0":"0"},"codeShared":{"0":"1"},"equipmenetCode":"320","equipmentName":"Airbus A320-100\/200","classCode":"M","className":"Economy","carrierName":"KLM","segmentNo":1},
{"departureTime":"17:25","departureCityCode":"LHR","arrivalTime":"18:40","arrivalCityCode":"BCN","flightCode":"KL 3403","flightId":"3","price":"300","departureCityName":{"0":"Amsterdam"},"arrivalCityName":{"0":"Rome Fiumicino"},"departureDate":"23SEP09","arrivalDate":"23SEP09","nrOfStops":{"0":"0"},"codeShared":{"0":"1"},"equipmenetCode":"320","equipmentName":"Airbus A320-100\/200","classCode":"M","className":"Economy","carrierName":"KLM","segmentNo":1},
{"departureTime":"13:25","departureCityCode":"AMS","arrivalTime":"14:40","arrivalCityCode":"FCO","flightCode":"AZ 107","flightId":"4","price":"400","departureCityName":{"0":"Amsterdam"},"arrivalCityName":{"0":"Rome Fiumicino"},"departureDate":"23SEP09","arrivalDate":"23SEP09","nrOfStops":{"0":"0"},"codeShared":{"0":"0"},"equipmenetCode":"320","equipmentName":"Airbus A320-100\/200","classCode":"H","className":"Economy","carrierName":"Alitalia","segmentNo":1},
{"departureTime":"13:40","departureCityCode":"AMS","arrivalTime":"15:55","arrivalCityCode":"FCO","flightCode":"KL 1603","flightId":"5","price":"","departureCityName":{"0":"Amsterdam"},"arrivalCityName":{"0":"Rome Fiumicino"},"departureDate":"23SEP09","arrivalDate":"23SEP09","nrOfStops":{"0":"0"},"codeShared":{"0":"0"},"equipmenetCode":"73H","equipmentName":"Boeing 737","classCode":"M","className":"Economy","carrierName":"KLM","segmentNo":1},
{"departureTime":"18:40","departureCityCode":"AMS","arrivalTime":"19:55","arrivalCityCode":"FCO","flightCode":"KL 1604","flightId":"5","price":"500","departureCityName":{"0":"Amsterdam"},"arrivalCityName":{"0":"Rome Fiumicino"},"departureDate":"23SEP09","arrivalDate":"23SEP09","nrOfStops":{"0":"0"},"codeShared":{"0":"0"},"equipmenetCode":"73H","equipmentName":"Boeing 737","classCode":"M","className":"Economy","carrierName":"KLM","segmentNo":1}]};

var segment1Reader = new Ext.data.JsonReader({
"root":"data",
"fields":[ {"name":"departureTime"},
{"name":"arrivalTime"},
{"name":"flightCode"},
{"name":"price"},
{"name":"flightId"}
]});

var segment1Store = new Ext.data.GroupingStore({
"groupField":"flightId",
"data":segmentData1,
"reader":segment1Reader,
"sortInfo":{"field":"departureTime"}

});

var Grid_4aa4ad2ed2540 = new Ext.grid.GridPanel({
"columns":[expander1,
{"dataIndex":"departureTime","header":"D", "sortable": true},
{"dataIndex":"arrivalTime","header":"A", "sortable": true},
{"dataIndex":"flightCode","header":"C","sortable":true},
{"dataIndex":"price","header":"P","sortable":true},
{"dataIndex":"flightId","hidden":true,"sortable":true, 'header': 'flightId'}],
"store":segment1Store,
"plugins":[expander1],
"viewConfig":{
"forceFit":true,
"scrollOffset":"0"
},
"autoHeight":true,
"border":true,
"layout":"fit",
"width":220,
"id":"segment1Grid",
"renderTo":"flightGrid1",
"view": new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})

});

Condor
7 Sep 2009, 12:44 AM
GroupingStore normally first sorts by the sort field and then again on the groupBy field.

You can either override the applySort method of the store or change the sortType function of the flightId field (after adding this FR (http://www.extjs.com/forum/showthread.php?p=345372#post345372)).

rvrdesigns
7 Sep 2009, 3:45 AM
Thanks you've put me in the right direction.