View Full Version : ExtJS GroupingView Issue

5 Nov 2012, 3:00 PM
I'm having an issue with the GroupingView. In my grid, I have a bunch of columns, one column is to display the friendly text name of an item, the other column is to display an icon "swatch" that is based on the text value of an item, it uses a custom column renderer.

Let's call my two fields "Name", for the column that contains only text, and "Swatch" for the column that shows icons based on the value of the same data the name column displays. Both columns have the same data index property.

The problem comes when I try to group by the "Name" column, the header text of each group is not correct. Instead of seeing "Name: xxx" as the header, I'm seeing "Swatch: xxx" as the header, even though I clearly grouped by the "Name" column.

The order of appearance of my columns in my grid is "Swatch", then "Name". I've noticed that if I reverse the order, so that "Swatch" is last and "Name" is first, then the group text when I group by "Name" is correct.

So it appears that the GroupingView is searching for the first column definition that matches the data index property it was told to group on, but in my case this is wrong. Is there any way I can control this process? It's a big deal to duplicate this data in my data store but under a different data index name, so I'd like to avoid that if possible.

15 Nov 2012, 5:08 PM


16 Nov 2012, 12:21 AM
I would recommend giving your swatch column a different/blank dataindex, then in your swatch column renderer simply grab the value from the name column and return it.

Alternatively you could duplicate the data under a new dataindex by using the convert() function.

If that doesn't make sense I can put an example together once I'm at my computer later (currently on my phone) :)

16 Nov 2012, 2:24 AM
Here's an example:

(http://jsfiddle.net/Whinters/tDhjC/)All you would then need to do, is add your column renderer logic to show the icon in the swatch column instead of the value :)

19 Nov 2012, 9:30 AM
Awesome! Thank you!