View Full Version : Grid Grouping feature among multiple panels issue

12 Mar 2012, 3:07 PM
I've got a grid panel with the grouping feature enabled that I'm using in multiple tabs. Each of these panels has content driven by a table in the same tab (the table has a store behind it where each row has up to several hundred columns of data, but is only displaying a few of them)... when the user clicks a row on the table they trigger the grid panel with the group, which displays in a grouped-by-category fashion all of the rows (hidden or otherwise) from the main table. When a user clicks a row I'm doing a create to make a new instance of a simple store that has the name, value, and category of each row I want in my grouped table. This has worked out great for a single instance of this table combination. The problem that I've run into is when I use this combo across multiple views. I do have the selectors set to pull the instance of my group-enabled-table differently depending on the view (and using firefox and console logs I've confirmed that the tables have different IDs).

The problem I've run into is when I go back and forth between two views that share this mechanism... I go to the first view, click a row and get the expected results in the group-table... Then go to the second view, click a row and get the expected results in that instance of the group table... If I return to the original view however and click a row, I get a garbled mess... the group table will have the number of groups from the 2nd view, but only some of them will have labels... others will just have a + or - next to them.... going back to the 2nd view things will continue to work fine, but the first view remains hosed unless I reload the entire app. I tried removing the grouping feature from my table and when I do that everything works fine. Since the panels have separate IDs I'm confused by what seems to be a semi-static maintenance of groupers or something, but I haven't been able to pin it down. I checked via firebug that I'm operating out of the expected subclasses (my controller has the base logic and I implemented subclasses that redefine the ref to find the appropriate elements).

my model object:

Ext.define('MyApp.model.EntityDetails', {
extend: 'Ext.data.Model',
fields: ['name', 'value', 'category']

the store:

Ext.define('MyApp.store.EntityDetailsStore', {
extend: 'Ext.data.Store',
requires: 'MyApp.model.EntityDetails',
model: 'MyApp.model.EntityDetails',
autoLoad: false,
groupField: 'category'

the grouped table itself:

Ext.define('MyApp.view.tables.GroupedTable', {
extend: 'Ext.grid.Panel',
alias : 'widget.groupedtable',

title : 'Grouped Data Table',

//note that a store must be passed in to this class

features: [{ftype:'grouping'}],
hideHeaders: 'true',

dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{xtype: 'textfield',
emptyText: 'Search'}

initComponent: function() {
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Value', dataIndex: 'value', flex: 1},
{header: 'Category', dataIndex: 'category', hidden:true}



and a snippet of the controller code when a row is clicked in the tables (note that a ref to entityDetails is defined to the groupedtable above with a different path depending on its view):

onEntitySelect: function(selModel, selection, index){
var entityDetailsPanel = this.getEntityDetails();
var i = 0;
var metricName;
var metricValue;
var metricCat;
var detailsStore = Ext.create('MyApp.store.EntityDetailsStore');

for(i = 0; i < selection.data.metrics.length; i++){
metricName = selection.data.metrics[i].name;
metricCat = selection.data.metrics[i].category;
metricValue = selection.data.metrics[i].value;
var metricEntry = Ext.create('MyApp.model.EntityDetails', {
name : metricName,
value : metricValue,
category : metricCat


//once the store has been built up, reconfigure the grid to reload it

Again this works just fine as long as I stay in one view... and it even works fine jumping to a second view... but returning to the original view after going to the second view results in a table with no values and a bunch of half-built category entries with +/- next to them... And with grouping commented out of the groupedtable it works fine no matter how many times I jump back and forth.

12 Mar 2012, 3:27 PM
Try setting the features in initComponent. Does that help?

13 Mar 2012, 7:14 AM
That did the trick! I'm not sure I understand why it would be any different than having it set as a property by default, but I'm happy its working. Thanks so much for your help!

15 Mar 2012, 1:39 PM
Jeeheeeeeeeesus, I just ran into that one. *Thank you* jeremym, for taking the time to post. Even though I'd burned an hour or two, you probably saved me quite a few more.

That's *got* to be a bug, right? I mean, that's pretty nasty.