View Full Version : [CLOSED] Grid grouping feature breaks column sorting

27 Sep 2011, 1:17 PM

Ext version tested:

Ext 4.0 rev 6
Browser versions tested against:

FF6 (firebug 1.8 installed)
DOCTYPE tested against:


When a grid uses the grouping feature, then column sorting does not work.
Steps to reproduce the problem:

Run the test code.
Click the Replies column header to change the sort order.
To confirm that the problem is related to grouping, comment out the 'groupField' config for the store.
FYI: the same problem exists for local sorting (remoteSort: false).
The result that was expected:

The selected column and direction should be submitted as params to the service.
The result that occurs instead:

The recordset does not change and the sort param that is submitted is always title ASC.
Test Case:

Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', '../ux/');

Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt', 'threadid'
idProperty: 'threadid'

// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
pageSize: 200,
autoLoad: true,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'jsonp',
url: 'http://www.sencha.com/forum/remote_topics/index.php',
extraParams: {
total: 50000
reader: {
root: 'topics',
totalProperty: 'totalCount'
simpleSortMode: true
sorters: [{
property: 'lastpost',
direction: 'DESC'
,groupField: 'title' //comment out to enable sorting

var panel = Ext.create('Ext.grid.Panel',{
features: [{ ftype: 'grouping' }],
renderTo: Ext.getBody(),
width: 700,
height: 400,
title: 'ExtJS.com - Browse Forums',
store: store,
loadMask: true,
disableSelection: true,
viewConfig: {
trackOver: false
xtype: 'rownumberer',
width: 50,
sortable: false
id: 'topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
sortable: true
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: true
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: false


Possible fix:

not provided
Additional CSS used:

only default ext-all.css
Operating System:

WinXP Pro

27 Sep 2011, 9:43 PM
Can confirm with your sample, I can't confirm this with local sorting:

Ext.define('Thing', {
extend: 'Ext.data.Model',
fields: ['category', 'name']


var data = [],
i = 0;

for (; i < 10; ++i) {
name: i,
category: 'cat' + (i % 3)

Ext.create('Ext.grid.Panel', {
renderTo: document.body,
width: 400,
height: 400,
features: [Ext.create('Ext.grid.feature.Grouping')],
store: {
model: 'Thing',
data: data,
groupField: 'category',
sorters: [{
property: 'name',
direction: 'DESC'
columns: [{
dataIndex: 'name',
header: 'Name'


As I change the sort it behaves as I would expect.

27 Sep 2011, 9:49 PM
Looking further, I don't think the test case is really a good representation.

Since it's using simpleSortMode, it takes the topmost sort parameter to send to the server. In this case, grouping always takes priority, which is why it's the only param passed. I don't really see any other reasonable behaviour, grouping always needs to take precedence over a sort, so with simpleSortMode this makes sense.

Marking as closed.

29 Sep 2011, 12:10 PM
Thanks for looking into this.

Might I request that a debug message be logged to the console if a developer configures a proxy with simpleSortMode: true and is grouping on a column in order to avoid this confusion in the future? Or at least mention in the API?

Thanks again.