PDA

View Full Version : Help with changing output on "groupHeaderTpl"



benz87
27 Feb 2012, 1:46 PM
Hi,

I am new to all this ExtJS 4 and I am still learning.
But I have now struggled with the same problem for almost 16 hours and haven't yet been able to find anything on this forum or by searching on Google.

So I hope one of you PLEASE can help me?!

My problem:
I want to make an example of an Task Manager where the tasks are grouped. They shall be grouped so those task that has a Due Date today, will be grouped under "Today". The tasks that has a Due Date tomorrow will be grouped under "Tomorrow" and so on.

I am using ExtJS 4 and here is some of the code I'm working with.:



Ext.define('Task', {
extend: 'Ext.data.Model',
idProperty: 'taskId',
fields: [
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'rate', type: 'float'},
{name: 'cost', type: 'float'},
{name: 'due', type: 'date', dateFormat:'m/d/Y'}
]
});

..............

var store = Ext.create('Ext.data.Store', {
model: 'Task',
grouper: {
property: 'due',
direction: 'ASC'
},
groupField: 'due',
data: data
});

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

var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
features: [groupingFeature],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
columns: [
{
text : 'Opgave',
flex : 1,
sortable : false,
dataIndex: 'description'
},
{
text : 'Kategori',
width : 75,
sortable : true,
dataIndex: 'project'
},
{
text : 'Forfaldsdato',
width : 85,
sortable : true,
editor : {xtype: 'datefield', allowBlank: false},
renderer : Ext.util.Format.dateRenderer('d/m/Y'),
dataIndex: 'due'
}
],
..................


That was some of the code.. Hope someone can help me!!
Thanks in advance :)

Best Regards,
Benjamin

vietits
28 Feb 2012, 12:24 AM
Let try


var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: '{[ groupTitle(values.name) ]}'
});

groupTitle(dateString){
var date = new Date(dateString);
var today = new Date();
var ret = '';
// compare date with today and assign result to ret variable
return ret;
}

Note: groupTitle() must be defined in global scope.

benz87
28 Feb 2012, 12:48 AM
Thanks for your answer vietits.
But....

Im not that in to ExtJS 4 yet.. so could you please tell me where the grouptitle() should be defined?

vietits
28 Feb 2012, 1:11 AM
You should define groupTitle() outsite any local scope because it must be globally accessible.

benz87
28 Feb 2012, 1:47 AM
Can you give a small example on how to do it outside?

or can I doing it by using this:

groupTitle: function(dateString){
var date = new Date(dateString);
var today = new Date();
var ret = '';
// compare date with today and assign result to ret variable
return ret;
}

vietits
28 Feb 2012, 1:56 AM
Example:


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

Ext.require([
'Ext.grid.*',
'Ext.data.*',
]);

// this function is defined in the global scope
groupTitle(dateString){
var date = new Date(dateString);
var today = new Date();
var ret = '';
// compare date with today and assign result to ret variable
return ret;
}

Ext.onReady(function() {
Ext.define('Task', {
extend: 'Ext.data.Model',
idProperty: 'taskId',
fields: [
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'rate', type: 'float'},
{name: 'cost', type: 'float'},
{name: 'due', type: 'date', dateFormat:'m/d/Y'}
]
});
..............
var store = Ext.create('Ext.data.Store', {
model: 'Task',
grouper: {
property: 'due',
direction: 'ASC'
},
groupField: 'due',
data: data
});

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: '{[groupTitle(values.name)]}'
});

var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
....
});

benz87
28 Feb 2012, 2:39 AM
I am using the Desktop example from Sencha and I tried doing what you said but it returns the error:
Uncaught SyntaxError: Unexpected token (

Could you tell me where to put the code in this special case? I have removed the code for groupTitle()



Ext.define('MyDesktop.Task', {
extend: 'Ext.ux.desktop.Module',

requires: [
'Ext.Date.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.tree.*',
'Ext.state.*',
'Ext.panel.*',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.layout.container.Table',
'Ext.tip.QuickTipManager'
],


id:'task',

init : function(){
this.launcher = {
text: 'Task',
iconCls:'task',
handler : this.createWindow,
scope: this
}
},


createWindow : function(){

Ext.QuickTips.init();
// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
// The default dockedItem weights have TLRB order, but TBLR matches border layout:
Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };

Ext.define('Task', {
extend: 'Ext.data.Model',
idProperty: 'taskId',
fields: [
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'rate', type: 'float'},
{name: 'cost', type: 'float'},
{name: 'due', type: 'date', dateFormat:'m/d/Y'}
]
});


var data = [
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'}
];

var store = Ext.create('Ext.data.Store', {
model: 'Task',
grouper: {
property: 'due',
direction: 'ASC'
},
groupField: 'due',
data: data
});

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: '{[ groupTitle(values.name) ]}'
});

var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
features: [groupingFeature],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
columns: [
{
text : 'Opgave',
flex : 1,
sortable : false,
dataIndex: 'description'
},
{
text : 'Kategori',
width : 75,
sortable : true,
dataIndex: 'project'
},
{
text : 'Forfaldsdato',
width : 85,
sortable : true,
editor : {xtype: 'datefield', allowBlank: false},
renderer : Ext.util.Format.dateRenderer('d/m/Y'),
dataIndex: 'due'
}
],
.........................

vietits
28 Feb 2012, 2:52 AM
You can define groupTitle() outside the Ext.define():



// this function is defined in the global scope
groupTitle(dateString){
var date = new Date(dateString);
var today = new Date();
var ret = '';
// compare date with today and assign result to ret variable
return ret;
}
Ext.define('MyDesktop.Task', {
extend: 'Ext.ux.desktop.Module',

requires: [
'Ext.Date.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.tree.*',
'Ext.state.*',
'Ext.panel.*',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.layout.container.Table',
'Ext.tip.QuickTipManager'
],
...



Other solution is declaring groupTitle() as a static member of your class:


Ext.define('MyDesktop.Task', {
extend: 'Ext.ux.desktop.Module',
statics: {
groupTitle: function(date){
....
}
},
requires: [
'Ext.Date.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.tree.*',
'Ext.state.*',
'Ext.panel.*',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.layout.container.Table',
'Ext.tip.QuickTipManager'
],
...
var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: '{[ MyDesktop.Task.groupTitle(values.name) ]}'
});
...

benz87
28 Feb 2012, 3:08 AM
NICE!!!! It worked by declaring it as a static member :)

but now it wont write anything in ret = ' '; unless I write anything.. so here I just use IF ELSE to check the dates? right? :)

vietits
28 Feb 2012, 5:01 AM
Yes, that's right.

benz87
28 Feb 2012, 5:15 AM
Thanks! You're the man!!! :D

Best Regards,
Benjamin

benz87
28 Feb 2012, 2:50 PM
I hope you can help me again Vietits..
When I group my data by 'due' every date gets its own "kommende opgave".

How can I, in 'groupers' make it so it wont do that? Please see code..



Ext.define('MyDesktop.Task', {
extend: 'Ext.ux.desktop.Module',

statics: {
groupTitle: function(dateString){
var date = new Date(dateString);// Udskriver opgavens dato, tid og GMT
var today = new Date(); // Udskriver dagens dato, tid og GMT
var yesterday = Ext.Date.add(today, Ext.Date.DAY, -1);
var notime = date.getTime();

if (date < yesterday) {
return 'Overskredet Opgaver';
} else {
return 'Kommende Opgaver';
};
}
},

requires: [
'Ext.Date.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.tree.*',
'Ext.state.*',
'Ext.panel.*',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.layout.container.Table',
'Ext.tip.QuickTipManager'
],


id:'task',

init : function(){
this.launcher = {
text: 'Task',
iconCls:'task',
handler : this.createWindow,
scope: this
}
},


createWindow : function(){

Ext.QuickTips.init();
// setup the state provider, all state information will be saved to a cookie
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
// The default dockedItem weights have TLRB order, but TBLR matches border layout:
Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };

Ext.define('Task', {
extend: 'Ext.data.Model',
idProperty: 'taskId',
fields: [
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'rate', type: 'float'},
{name: 'cost', type: 'float'},
{name: 'due', type: 'date', dateFormat:'m/d/Y'}
]
});


var data = [
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'02/28/2012'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
];

var store = Ext.create('Ext.data.Store', {
model: 'Task',
groupers: {
property: 'due',
direction: 'ASC'
},
data: data
});

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: '{[ MyDesktop.Task.groupTitle(values.name) ]} ({rows.length} Opgave{[values.rows.length > 1 ? "r" : ""]})'
});

var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
features: [groupingFeature],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],

vietits
28 Feb 2012, 4:08 PM
groupTitle: function(dateString){
var date = new Date(dateString);// Udskriver opgavens dato, tid og GMT
var today = new Date(); // Udskriver dagens dato, tid og GMT
var yesterday = Ext.Date.add(today, Ext.Date.DAY, -1);
// var notime = date.getTime(); <- not used

// if (date < yesterday) { <- you can not compare two dates this way.
if(date.getTime() < yesterday.getTime()) {
return 'Overskredet Opgaver';
} else {
return 'Kommende Opgaver';
};
}

benz87
29 Feb 2012, 1:27 AM
Okay now I get that :) and it has been changed.. But it still groups by date.

How can I change it so it groups by either 'Kommende Opgaver' or 'Overskredet Opgaver' AND by date within these?



var store = Ext.create('Ext.data.Store', {
model: 'Task',
groupers: {
property: 'due',
direction: 'ASC'
},
data: data
});

vietits
29 Feb 2012, 4:00 AM
@benz87,


Oh, this is new issue. It is differ from what you raised at the first post. To resolve your request, I think you should create a new field for your model, suppose its name is 'dueGroup'. This field will have value 'yesterday', 'today', 'future' etc basing on the value of field 'due'. Then you group by this new field instead of due field as you have done.


Below is the solution to generate 'dueGroup' field basing on value of 'due' field at client side. You can also do this task at server side.


Model


...
fields: [{
name: 'due', type: 'date'
},{
name: 'dueGroup', type: 'string', convert: function(v, record){
var date = new Date(record.get('due'));
var today = new Date();
var ret = '';
// your code here to assign value to ret variable basing on value of date variable
return ret;
}
},{
...
}]
...

Store


var store = Ext.create('Ext.data.Store', {
model: 'Task',
groupers: {
property: 'dueGroup',
direction: 'ASC'
},
sorters: [{
property: 'due',
direction: 'ASC'
}],
data: data
});

Grouping feature (you don't have to use groupTitle any more)

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: '{name}'
});