PDA

View Full Version : Trying to use custom grouper on store



jclark42796
3 May 2012, 12:56 PM
As a work around to http://www.sencha.com/forum/showthread.php?199959-Grid-grouping-is-sorting-automatically-in-4.1 I am attempting to use a custom grouper on my store. My starting grid looks like this:
34850


My code with the grouper


Ext.define('Ext.simponspanel', {
alias: 'widget.simpsonspanel',
extend: 'Ext.grid.Panel',
columns: [
{ header: 'Col1', dataIndex: 'name', flex: 1},
{ header: 'Col2', dataIndex: 'points', flex: 1, aaaa: 'custom prop'},
{ dataIndex: 'title', hidden: true}
],
height: 500,
width: 600,
selModel: Ext.create('Ext.selection.CellModel'),

initComponent: function(config){

var self = this;

this.features = Ext.create('Ext.grid.feature.GroupingSummary', {
groupHeaderTpl: '{name}'
});

this.store = new Ext.data.JsonStore({
fields: [{name: 'name'},{name: 'title'}, {name: 'points'}, {name: 'order'}],
groupField: 'title',
groupers: [Ext.create('Ext.util.Grouper', {
sorterFn: function(o1,o2){
if(o1.data.order < o2.data.order) return -1;
if(o1.data.order === o2.data.order) return 0;
if(o1.data.order > o2.data.order) return 1;
}
})]
});
this.store.add({order: 2, title: 'Expense', name: 'Expense', points: 100},
{order: 2, title: 'Expense', name: 'Expense', points: 1000},
{order: 1, title: 'Revenue', name: 'Revenue', points: 1200},
{order: 3,title: 'Net income/loss', name: 'Net income/loss', points:100});
this.callParent();
}
});


Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
//layout: 'fit',
padding: 10,
style: 'background-color: white',
items: [
{
xtype: 'simpsonspanel'
}
]
});
}
});



My order is correct, but I lose the groupings. What am I missing?

Thanks,
Jim

34851

scottmartin
3 May 2012, 2:44 PM
See if this works:



Ext.override(Ext.util.Grouper, {
sorterFn: function(o1,o2){
if(o1.data.order < o2.data.order) return -1;
if(o1.data.order === o2.data.order) return 0;
if(o1.data.order > o2.data.order) return 1;
}
});

Ext.define('Ext.simponspanel', {
alias: 'widget.simpsonspanel',
extend: 'Ext.grid.Panel',
columns: [
{ header: 'Col1', dataIndex: 'name', flex: 1},
{ header: 'Col2', dataIndex: 'points', flex: 1, aaaa: 'custom prop'},
{ dataIndex: 'title', hidden: true}
],
height: 500,
width: 600,
selModel: Ext.create('Ext.selection.CellModel'),

initComponent: function(config){

var self = this;

this.features = Ext.create('Ext.grid.feature.GroupingSummary', {
groupHeaderTpl: '{name}'
});

this.store = new Ext.data.JsonStore({
fields: [{name: 'name'},{name: 'title'}, {name: 'points'}, {name: 'order'}],
groupField: 'title'
});
this.store.add({order: 2, title: 'Expense', name: 'Expense', points: 100},
{order: 2, title: 'Expense', name: 'Expense', points: 1000},
{order: 1, title: 'Revenue', name: 'Revenue', points: 1200},
{order: 3,title: 'Net income/loss', name: 'Net income/loss', points:100});
this.callParent();
}
});


Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
//layout: 'fit',
padding: 10,
style: 'background-color: white',
items: [
{
xtype: 'simpsonspanel'
}
]
});
}
});


Regards,
Scott.

jclark42796
4 May 2012, 6:33 AM
Ok, that works, a couple of questions:

1) Won't that override all groupers?
2) Is this a bug?
3) Doesn't this assume any grouping is based on objects having "data.order"?
4) On a related note, I tried "transform", undefined is passed as the argument, I don't received the value.

groupers: Ext.create('Ext.util.Grouper', {
transform: function(o){
var x = o; // just for firebug inspection
return x;
}

Thanks,
Jim

scottmartin
4 May 2012, 6:57 AM
Yes, this will override all instances..

Look at Ext.Define for creating an override for your own class



Ext.define('My.ux.CoolTip', {
override: 'Ext.tip.ToolTip',

constructor: function (config) {
this.callParent(arguments); // calls Ext.tip.ToolTip's constructor
//...
}
});


Regards,
Scot.

jclark42796
4 May 2012, 7:06 AM
Just a followup on transform. I needed to define 'property' and 'root' for that to work. The docs say this about root: " This is mostly useful when sorting a Store, in which case we set the root to 'data' ..." but I had to set the root to 'data' for that to work.

jclark42796
4 May 2012, 7:56 AM
So instead of the custom grouper, using the transform function solves my problem



groupers: Ext.create('Ext.util.Grouper', {
property: 'title',
root: 'data',
transform: function(o){
if (o === 'Revenue') return 1;
if (o === 'Expense') return 2;
return 3;
}
})