1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    benz87 is on a distinguished road

      0  

    Default Answered: Help with changing output on "groupHeaderTpl"

    Answered: Help with changing output on "groupHeaderTpl"


    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.:

    Code:
    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

  2. You can define groupTitle() outside the Ext.define():

    Code:
    // 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:
    Code:
    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) ]}'
        });
        ...

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Let try
    Code:
    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.

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    benz87 is on a distinguished road

      0  

    Default


    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?

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    You should define groupTitle() outsite any local scope because it must be globally accessible.

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    benz87 is on a distinguished road

      0  

    Default


    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;
    }

  7. #6
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Example:
    Code:
    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',
        ....
    });

  8. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    benz87 is on a distinguished road

      0  

    Default


    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()

    Code:
    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'
                }
            ],
    .........................

  9. #8
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    You can define groupTitle() outside the Ext.define():

    Code:
    // 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:
    Code:
    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) ]}'
        });
        ...

  10. #9
    Sencha User
    Join Date
    Feb 2012
    Posts
    8
    Vote Rating
    0
    benz87 is on a distinguished road

      0  

    Default


    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?

  11. #10
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Yes, that's right.

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi