1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    2
    Vote Rating
    1
    f4nt0m is on a distinguished road

      1  

    Question Unanswered: Sencha Touch 2.x equivalent of GroupTPL?

    Unanswered: Sencha Touch 2.x equivalent of GroupTPL?


    Hi,

    In the API for List, I am unable to find GroupTPL and when attempting to use this, it also has not generated the HTML correctly. Therefore, I am under the impression that groupTPL has been deprecated in ST2.x. I would like to know how to modify the Group Header templates without GroupTPL?

    My code is as below

    Code:
    		var vwListCats = new Ext.Panel({
    			layout: 'fit',
    			iconCls: 'settings',
    			id: 'vwListCats',
    			cls: 'vwListCats',
    			title: 'List Categories',
    			items: {
    				id: 'cat_list',
    				xtype: 'list',
    				store: 'CategoryStore',
    				itemTpl: [
    					'<div class="catlist-name">{name}</div>',
    					'<div class="catlist-info">{info}</div>'
    					],
    				grouped:true,
    				groupTpl : [
    					'<tpl for=".">',
    						'<div class="x-list-group x-group-{id}">',
    							'<h3 class="cat-header-{group} x-list-header">{group}</h3>',
    							'<div class="x-list-group-items">',
    								'{items}',
    							'</div>',
    						'</div>',
    					'</tpl>'
    					],
    				listeners: {
    								'painted': function(event, btn) {		
    					$('h3.cat-header-rev').text('Revenues');
    					$('h3.cat-header-exp').text('Expenses');}
    				}
    				},
    			listeners: {
                    'activate': function(event, btn) {
                		Ext.StoreMgr.get('CategoryStore').load();            		
                	},	
    	},
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    There isn't an equivalent. The items are much different than in ST1
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User luismerino's Avatar
    Join Date
    Oct 2011
    Location
    Berlin
    Posts
    46
    Vote Rating
    4
    Answers
    1
    luismerino is on a distinguished road

      0  

    Default


    I exactly needed this today, and I ended up simply extending the Store:

    Code:
    config: {
            model: 'Blah.model.Event',
            groupTpl: '<div><div>{0}</div><div>{1}</div></div>',
            storeId: 'Events',
        
            sorters: [
                {
                    property: 'startTime',
                    direction: 'ASC'
                }
            ],
        
            [...]
            
            grouper: {
                groupFn: function(item) {
                    [....................]
                    var store = item.stores[0];
                    var group = [day, Ext.Date.getShortMonthName(start.getMonth()) + ' ' + Ext.Date.format(start, 'd, Y')];
                    
                    if (store.getGroupTpl()) {
                        return store.getGroupTpl().apply(group);
                    }
                    
                    return group;
                }
            }
    I hope that helps.

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    2
    Vote Rating
    1
    f4nt0m is on a distinguished road

      0  

    Default


    Quote Originally Posted by luismerino View Post
    I exactly needed this today, and I ended up simply extending the Store:

    I hope that helps.
    @luismerino: Thank you very much! I'll give it a shot tonight and see if it works.

  5. #5
    Sencha User luismerino's Avatar
    Join Date
    Oct 2011
    Location
    Berlin
    Posts
    46
    Vote Rating
    4
    Answers
    1
    luismerino is on a distinguished road

      0  

    Default


    Np. If it does for you please dont' forget to mark it as best answer.

  6. #6
    Sencha User ggendre's Avatar
    Join Date
    Feb 2012
    Location
    Lannion, France
    Posts
    24
    Vote Rating
    0
    ggendre is on a distinguished road

      0  

    Thumbs up worked

    worked


    thanks luismerino, it worked for me too !

    Anybody know why is groupTpl so hard to use now? is there another "official and better" way to customize group headers?

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

      0  

    Default


    Quote Originally Posted by luismerino View Post
    I exactly needed this today, and I ended up simply extending the Store:
    Code:
    config: {
            model: 'Blah.model.Event',
            groupTpl: '<div><div>{0}</div><div>{1}</div></div>',
            [...]
    The groupTpl should be an Ext.XTemplate, something like

    Code:
    config: {
            model: 'app.model.Event',
            groupTpl: groupTpl: new Ext.XTemplate
            (
                  '<div class="{0}">{1}</div>' // {0} and {1} will be replaced with the contents of your group array
            ),
            [...]