Disable default sort on group store

[harman]

HI All,

I am using ExtJS 4.0.7 Ext.data.Store for my grid and for some reasons need to group the records.
But when i define a group field it sorts them ASC or DESC by default.
How can i prevent the default sort?
Also, i do not want to permanently disable sort on grid columns.

Thanks for the reply in advance

Harman

[Zdeno]

Try set up groupDir option to undefined.

[harman]

Thanx for quick reply Zdeno

Strange that it considers 'undefined' as a parameter.
Allthough it doesnt solve the problem. It removes the arrow mark in the header that shows the sort direction but the records are sorted for the same column.
On second hand if i use 'sortOnLoad' as false it removes the sorting but still shows the sort direction in the Header.

So at last i use both


groupDir : 'undefined',
sortOnLoad : false,

and that solves my problem.

[Zdeno]

Yep, problem is there is default value for groupDir - groupDir: "ASC". I think you can experiment with options or maybe someone else know answer. What i found in source code is following part:


...
if (Ext.isArray(groupers)) {
newGroupers = groupers;
} else if (Ext.isObject(groupers)) {
newGroupers = [groupers];
} else if (Ext.isString(groupers)) {
grouper = me.groupers.get(groupers);

if (!grouper) {
grouper = {
property : groupers,
direction: direction
};
newGroupers = [grouper];
} else if (direction === undefined) {
grouper.toggle();
} else {
grouper.setDirection(direction);
}
}
...

or maybe there is clean solution. When you dont need sort functionality on store you can override sort function where you will send null params to parent

sort(null, null, null, null) { orig function got 4 params (docs have only first 2):

sort: function(sorters, direction, where, doSort) {

[harman]

Wouldn't that disable all sorts?
What if i sort on some other column?

or may be i am not getting you exactly.
Can you put up some sample code?
how would it stop and then start working.

[Zdeno]

I didnt test it but have few ideas:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-sortable

or

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.Sorter-cfg-sorterFn

[vietits]

FYI


Ext.onReady(function() {


Ext.define('MyStore', {
extend: 'Ext.data.Store',
constructor: function(config){
var me = this,
groupers = config.groupers || me.groupers,
groupField = config.groupField || me.groupField;


delete config.groupers;
delete config.groupField;


me.callParent(arguments);


if (!groupers && groupField) {
groupers = [{
property : groupField,
direction: config.groupDir || me.groupDir
}];
}
me.groupers.addAll(me.decodeGroupers(groupers));
},
onBeforeSort: Ext.emptyFn
});

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


var Restaurants = Ext.create('MyStore', {
storeId: 'restaraunts',
model: 'Restaurant',
groupField: 'cuisine',
data: [{
name: 'La Strada',
cuisine: 'Italian'
},{
name: 'Nola\'s',
cuisine: 'Cajun'
},{
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: 'House of Bagels',
cuisine: 'Bagels'
},{
name: 'The Prolific Oven',
cuisine: 'Sandwiches'
},{
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'
},{
name: 'Joya',
cuisine: 'Tapas'
},{
name: 'Jing Jing',
cuisine: 'Chinese'
},{
name: 'Patxi\'s Pizza',
cuisine: 'Pizza'
},{
name: 'Evvia Estiatorio',
cuisine: 'Mediterranean'
},{
name: 'Cafe 220',
cuisine: 'Mediterranean'
},{
name: 'Cafe Renaissance',
cuisine: 'Mediterranean'
},{
name: 'Kan Zeman',
cuisine: 'Mediterranean'
},{
name: 'Gyros-Gyros',
cuisine: 'Mediterranean'
},{
name: 'Mango Caribbean Cafe',
cuisine: 'Caribbean'
},{
name: 'Coconuts Caribbean Restaurant & Bar',
cuisine: 'Caribbean'
},{
name: 'Rose & Crown',
cuisine: 'English'
},{
name: 'Baklava',
cuisine: 'Mediterranean'
},{
name: 'Mandarin Gourmet',
cuisine: 'Chinese'
},{
name: 'Bangkok Cuisine',
cuisine: 'Thai'
},{
name: 'Darbar Indian Cuisine',
cuisine: 'Indian'
},{
name: 'Mantra',
cuisine: 'Indian'
},{
name: 'Janta',
cuisine: 'Indian'
},{
name: 'Hyderabad House',
cuisine: 'Indian'
},{
name: 'Starbucks',
cuisine: 'Coffee'
},{
name: 'Peet\'s Coffee',
cuisine: 'Coffee'
},{
name: 'Coupa Cafe',
cuisine: 'Coffee'
},{
name: 'Lytton Coffee Company',
cuisine: 'Coffee'
},{
name: 'Il Fornaio',
cuisine: 'Italian'
},{
name: 'Lavanda',
cuisine: 'Mediterranean'
},{
name: 'MacArthur Park',
cuisine: 'American'
},{
name: 'St Michael\'s Alley',
cuisine: 'Californian'
},{
name: 'Cafe Renzo',
cuisine: 'Italian'
},{
name: 'Osteria',
cuisine: 'Italian'
},{
name: 'Vero',
cuisine: 'Italian'
},{
name: 'Cafe Renzo',
cuisine: 'Italian'
},{
name: 'Miyake',
cuisine: 'Sushi'
},{
name: 'Sushi Tomo',
cuisine: 'Sushi'
},{
name: 'Kanpai',
cuisine: 'Sushi'
},{
name: 'Pizza My Heart',
cuisine: 'Pizza'
},{
name: 'New York Pizza',
cuisine: 'Pizza'
},{
name: 'California Pizza Kitchen',
cuisine: 'Pizza'
},{
name: 'Round Table',
cuisine: 'Pizza'
},{
name: 'Loving Hut',
cuisine: 'Vegan'
},{
name: 'Garden Fresh',
cuisine: 'Vegan'
},{
name: 'Cafe Epi',
cuisine: 'French'
},{
name: 'Tai Pan',
cuisine: 'Chinese'
}]
});

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'Cuisine: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
});


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',
features: [groupingFeature],
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
},{
text: 'Cuisine',
flex: 1,
dataIndex: 'cuisine'
}],
fbar : ['->', {
text:'Toggle Grouping',
iconCls: 'icon-clear-group',
handler : function(){
groupingFeature.disabled ? groupingFeature.enable() : groupingFeature.disable();
}
}]
});
});