Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  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