PDA

View Full Version : [OPEN] [4.2] Grid with rendered column and grouping feature does'nt display rendered value



poum
3 Apr 2013, 10:22 AM
With 4.2.0.663, a Grid with grouping feature don't display correctly the group header

groupHeaderTpl: 'Group: {name}'when the corresponding column use a renderer.

Using renderedGroupValue instead of name display nothing at all.

Works as expected with 4.1.

slemmon
3 Apr 2013, 2:19 PM
Hi,
I'm working on building a test case to demonstrate the bug. Can you offer a sample code snippet (or feel free to modify the code below) to further demonstrate the expected result versus what you're seeing currently?



Ext.create('Ext.grid.Panel', {
width: 200,
height: 240,
renderTo: document.body,
features: [{
ftype: 'groupingsummary'
}],
store: {
model: 'TestResult',
groupField: 'subject',
data: [{
student: 'Student 1',
subject: 'Math',
mark: 84
},{
student: 'Student 1',
subject: 'Science',
mark: 72
},{
student: 'Student 2',
subject: 'Math',
mark: 96
},{
student: 'Student 2',
subject: 'Science',
mark: 68
}]
},
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
renderer: function (val, meta, rec) {
return 'Something New';
}
}, {
dataIndex: 'mark',
text: 'Mark',
summaryType: 'average'
}]
});

poum
4 Apr 2013, 12:31 AM
Bug demo using a Sencha Grouping Grid example.
Just add a renderer for cuisine column ...

I've attached 2 annoted screenshots for 4.1 & 4.2.
Tested on Ubuntu 12.04 32bit & Firefox 19.0.2


Ext.require(['Ext.data.*', 'Ext.grid.*']);
Ext.onReady(function() {
// wrapped in closure to prevent global vars.
Ext.define('Restaurant', {
extend: 'Ext.data.Model',
fields: ['name', 'cuisine']
});

var 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'
}],
listeners: {
groupchange: function(store, groupers) {
var grouped = restaurants.isGrouped(),
groupBy = groupers.items[0] ? groupers.items[0].property : '',
toggleMenuItems, len, i = 0;

// Clear grouping button only valid if the store is grouped
grid.down('[text=Clear Grouping]').setDisabled(!grouped);

// Sync state of group toggle checkboxes
if (grouped && groupBy === 'cuisine') {
toggleMenuItems = grid.down('button[text=Toggle groups...]').menu.items.items;
for (len = toggleMenuItems.length; i < len; i++) {
toggleMenuItems[i].setChecked(groupingFeature.isExpanded(toggleMenuItems[i].text));
}
grid.down('[text=Toggle groups...]').enable();
} else {
grid.down('[text=Toggle groups...]').disable();
}
}
}
});

var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: true,
startCollapsed: true,
id: 'restaurantGrouping'
}),
groups = restaurants.getGroups(),
len = groups.length, i = 0,
toggleMenu = [],
toggleGroup = function(item) {
var groupName = item.text;
if (item.checked) {
groupingFeature.expand(groupName, true);
} else {
groupingFeature.collapse(groupName, true);
}
};

// Create checkbox menu items to toggle associated groupd
for (; i < len; i++) {
toggleMenu[i] = {
xtype: 'menucheckitem',
text: groups[i].name,
handler: toggleGroup
}
}

var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
collapsible: true,
iconCls: 'icon-grid',
frame: true,
store: restaurants,
width: 600,
height: 400,
title: 'Restaurants',
resizable: true,
features: [groupingFeature],
tbar: ['->', {
text: 'Toggle groups...',
menu: toggleMenu
}],

// Keep checkbox menu items in sync with expand/collapse
viewConfig: {
listeners: {
groupcollapse: function(v, n, groupName) {
if (!grid.down('[text=Toggle groups...]').disabled) {
grid.down('menucheckitem[text=' + groupName + ']').setChecked(false, true);
}
},
groupexpand: function(v, n, groupName) {
if (!grid.down('[text=Toggle groups...]').disabled) {
grid.down('menucheckitem[text=' + groupName + ']').setChecked(true, true);
}
}
}
},
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
},{
text: 'Cuisine',
flex: 1,
dataIndex: 'cuisine',
// BUG DEMO: added next line
renderer: function() { return 'Kuizine'; }
}],
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function() {
groupingFeature.disable();
}
}]
});
});

slemmon
4 Apr 2013, 1:25 PM
I'm with you now.

Thanks for the report! I have opened a bug in our bug tracker.

bone
3 Jun 2013, 4:19 AM
bump?