PDA

View Full Version : Disable default sort on group store



harman
8 Aug 2012, 1:50 AM
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
8 Aug 2012, 2:25 AM
Try set up groupDir option to undefined.

harman
8 Aug 2012, 5:14 AM
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
8 Aug 2012, 6:43 AM
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
31 Aug 2012, 7:42 AM
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
31 Aug 2012, 12:30 PM
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
31 Aug 2012, 7:49 PM
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();
}
}]
});
});