Ext.feature.Grouping

[circusfr]

Hello,

I'm writing a large app.

I'm using cards as layout to display different modules.

Grouping feature doesn't display normally if some operations (store.getRange(), grid.getSelectionModel().getSelection()) are done in other gridPanel before rendering.

Below, simple code to reproduce the issue and a screenshot.

Thank you in advance for any help or advise.

REQUIRED INFORMATION


Ext version tested:

Ext 4.1.1
Browser versions tested against:

Firefox 14 (firebug 1.10.0 installed)
Chrome 20
Test Case:



Ext.define('Restaurant', {
extend: 'Ext.data.Model',
fields: ['name', 'cuisine']
});


restaurants = Ext.create('Ext.data.Store', {
storeId: 'restaraunts',
model: 'Restaurant',
groupField: 'cuisine',
sorters: ['cuisine','name'],
data: [{
name: 'Cheesecake Factory',
cuisine: 'American'
},{
name: 'University Cafe',
cuisine: 'American'
},{
name: 'Slider Bar',
cuisine: 'American'
},{
name: 'Shokolaat',
cuisine: 'American'
},{
name: 'Gordon Biersch',
cuisine: 'American'
},{
name: 'Crepevine',
cuisine: 'American'
},{
name: 'Creamery',
cuisine: 'American'
},{
name: 'Old Pro',
cuisine: 'American'
},{
name: 'Nola\'s',
cuisine: 'Cajun'
},{
name: 'House of Bagels',
cuisine: 'Bagels'
},{
name: 'The Prolific Oven',
cuisine: 'Sandwiches'
},{
name: 'La Strada',
cuisine: 'Italian'
},{
name: 'Buca di Beppo',
cuisine: 'Italian'
},{
name: 'Pasta?',
cuisine: 'Italian'
},{
name: 'Madame Tam',
cuisine: 'Asian'
},{
name: 'Sprout Cafe',
cuisine: 'Salad'
},{
name: 'Pluto\'s',
cuisine: 'Salad'
},{
name: 'Junoon',
cuisine: 'Indian'
},{
name: 'Bistro Maxine',
cuisine: 'French'
},{
name: 'Three Seasons',
cuisine: 'Vietnamese'
},{
name: 'Sancho\'s Taquira',
cuisine: 'Mexican'
},{
name: 'Reposado',
cuisine: 'Mexican'
},{
name: 'Siam Royal',
cuisine: 'Thai'
},{
name: 'Krung Siam',
cuisine: 'Thai'
},{
name: 'Thaiphoon',
cuisine: 'Thai'
},{
name: 'Tamarine',
cuisine: 'Vietnamese'
}]
});


grid1 = Ext.create('Ext.grid.Panel', {
title: 'Grid1',
store: restaurants,
columns: [{
header: 'Name',
dataIndex: 'name',
sortable: true,
menuDisabled: true,
flex: 1
},{
header: 'Cuisine',
dataIndex: 'cuisine',
sortable: true,
menuDisabled: true,
flex: 1
}],
selModel: {
mode: 'MULTI'
},
dockedItems: {
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Show Grid2',
handler: function(){
grid = this.up('grid');
rows = grid.getSelectionModel().getSelection();
this.up('tabpanel').setActiveTab(1);
}
}]
}
});


grid2 = Ext.create('Ext.grid.Panel', {
title: 'Grid2',
store: restaurants,
columns: [{
header: 'Name',
dataIndex: 'name',
sortable: true,
flex: 1
},{
header: 'Cuisine',
dataIndex: 'cuisine',
sortable: true,
flex: 1
}],
features: [{
ftype: 'grouping',
groupHeaderTpl: '{name}',
hideGroupedHeader: true,
collapsible: false,
startCollapsed: false
}]
});


Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
items: [grid1, grid2]
});



Screenshot or Video:
37420

Operating System:

Win 7

[evant]

It's caused because you're not using var statements.



Ext.define('Restaurant', {
extend: 'Ext.data.Model',
fields: ['name', 'cuisine']
});

Ext.require('*');

Ext.onReady(function() {

var restaurants = Ext.create('Ext.data.Store', {
model: 'Restaurant',
groupField: 'cuisine',
sorters: ['cuisine', 'name'],
data: [{
name: 'Cheesecake Factory',
cuisine: 'American'
}, {
name: 'University Cafe',
cuisine: 'American'
}, {
name: 'Slider Bar',
cuisine: 'American'
}, {
name: 'Shokolaat',
cuisine: 'American'
}, {
name: 'Gordon Biersch',
cuisine: 'American'
}, {
name: 'Crepevine',
cuisine: 'American'
}, {
name: 'Creamery',
cuisine: 'American'
}, {
name: 'Old Pro',
cuisine: 'American'
}, {
name: 'Nola\'s',
cuisine: 'Cajun'
}, {
name: 'House of Bagels',
cuisine: 'Bagels'
}, {
name: 'The Prolific Oven',
cuisine: 'Sandwiches'
}, {
name: 'La Strada',
cuisine: 'Italian'
}, {
name: 'Buca di Beppo',
cuisine: 'Italian'
}, {
name: 'Pasta?',
cuisine: 'Italian'
}, {
name: 'Madame Tam',
cuisine: 'Asian'
}, {
name: 'Sprout Cafe',
cuisine: 'Salad'
}, {
name: 'Pluto\'s',
cuisine: 'Salad'
}, {
name: 'Junoon',
cuisine: 'Indian'
}, {
name: 'Bistro Maxine',
cuisine: 'French'
}, {
name: 'Three Seasons',
cuisine: 'Vietnamese'
}, {
name: 'Sancho\'s Taquira',
cuisine: 'Mexican'
}, {
name: 'Reposado',
cuisine: 'Mexican'
}, {
name: 'Siam Royal',
cuisine: 'Thai'
}, {
name: 'Krung Siam',
cuisine: 'Thai'
}, {
name: 'Thaiphoon',
cuisine: 'Thai'
}, {
name: 'Tamarine',
cuisine: 'Vietnamese'
}]
});

var grid1 = Ext.create('Ext.grid.Panel', {
title: 'Grid1',
store: restaurants,
columns: [{
header: 'Name',
dataIndex: 'name',
sortable: true,
menuDisabled: true,
flex: 1
}, {
header: 'Cuisine',
dataIndex: 'cuisine',
sortable: true,
menuDisabled: true,
flex: 1
}],
dockedItems: {
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Show Grid2',
handler: function() {
var grid = this.up('grid'),
rows = grid.getSelectionModel().getSelection();

this.up('tabpanel').setActiveTab(1);
}
}]
}
});

var grid2 = Ext.create('Ext.grid.Panel', {
title: 'Grid2',
store: restaurants,
columns: [{
header: 'Name',
dataIndex: 'name',
sortable: true,
flex: 1
}, {
header: 'Cuisine',
dataIndex: 'cuisine',
sortable: true,
flex: 1
}],
features: [{
ftype: 'grouping',
groupHeaderTpl: '{name}',
hideGroupedHeader: true,
collapsible: false,
startCollapsed: false
}]
});

var tabs = Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
items: [grid1, grid2]
});
});


If you don't use them, the variables become global. As such, you're overwriting either grid/rows at some point that is causing problems in the grid.

[circusfr]

Thanks for your usefull reply.

Actually, I'm able to write large applications Javascript Php MySql but I don't know properly use var !

I have to review many of my scripts.

Ext is great !