1. #1
    Sencha User Surykat's Avatar
    Join Date
    Jul 2011
    Location
    BIALYSTOK, Poland
    Posts
    58
    Answers
    1
    Vote Rating
    1
    Surykat is on a distinguished road

      0  

    Default Unanswered: [PR2] How to change list itemTpl dynamically?

    Unanswered: [PR2] How to change list itemTpl dynamically?


    I'm trying now to bring back switching itemTpl functionality, fired from selectfield change event, from my Sencha Touch 1.0 project.

    I tried many options to make it work, but without results.

    My old, working code (in ST1.0):
    Code:
    change: function(sel, val) {
    	if(Ext.getCmp('myList')) {
    		var list = Ext.getCmp('myList');
    		var store = list.getStore();
    
    
    		if(val == 1){
    			list.itemTpl = '{property1}';
    			store.sort('property1', 'ASC');
    		}
    		else if(val == 2){
    			list.itemTpl = '{property2}';
    			store.sort('property2', 'ASC');
    		}
    		list.bindStore(store);
    		list.refresh();
    	}
    }
    And now my code from future release (ST2 PR2):
    Code:
    {
    	event: 'change',
    	fn: function(field) {
    		var val = field.getValue(); 
    		if(Ext.getCmp('myList')) {
    			var list = Ext.getCmp('myList');
    			var store = list.getStore();
    			//var store = Ext.getStore('myStore');
    	                        
    			if(val == 1){
    				//list.itemTpl = '{property1}';
    				list.setTpl('{property1}');
    				store.sort('property1', 'ASC');
    			}
    			else if(val == 2){
    				//list.itemTpl = '{property2}';
    				list.setTpl('{property2}');
    				store.sort('property2', 'ASC');
    			}
    	                        
    			list.setStore(store);
    			list.refresh();
    		}
    }
    Am I doing anything wrong?

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    1st: stop using Ext.getCmp AND static IDs.

    2nd: try list.setItemTpl(yourInstanceof Ext.XTemplate); not a simple string

  3. #3
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    You can dynamically set the itemTpl of a DataView/List after render, but it will not actually update the TPL as it would need to refresh the whole view.

    You can get around that by calling setItemTpl() with a string, Array of strings or XTemplate, and then calling onStoreClear() and refresh().

    Code:
    list.setItemTpl('<div>{text}....</div>');
    list.onStoreClear();
    list.refresh();
    I haven't tested this, in in theory it should work.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #4
    Sencha User Surykat's Avatar
    Join Date
    Jul 2011
    Location
    BIALYSTOK, Poland
    Posts
    58
    Answers
    1
    Vote Rating
    1
    Surykat is on a distinguished road

      0  

    Default


    I have done mistake in method names. It should be 'setItemTpl' instead of 'setTpl'. But the problem still exists.

    The template is changing only at the first view instance.. I rewrite change method of selectfield into a controller (without that even the event wasn't fired at second instance of view).

    Sample of my controller class code:
    Code:
    ...
    
    
    this.control({
    	'selectfield[info="typeOne"]': {
    		change: this.onSelectChange
    	}
    })
    
    
    ...
    
    
    onSelectChange: function(field) {
    	var val = field.getValue(); 
    	
    	//Getting list from ref declaration
    	var list = this.getMyList();
                
        if(val == 1){
         	list.setItemTpl('{firstValue}');
         	store.sort('firstValue', 'ASC');
        }
        else if(val == 2){ 
         	list.setItemTpl('{secondValue}');
         	store.sort('secondValue', 'ASC');
        }
        else if(val == 3){
            list.setItemTpl('{thirdValue}');
            store.sort('thirdValue', 'ASC');
        }
                
        list.setStore(store);
        list.refresh();
    }
    And like I said. When I open view at the first time and change option, everything is working fine. But when I came back to this view from another it sorts my like like I want to but doesn't change my itemTpl.. (calling 'list.onStoreClear()' is cousing error of setting innerHTML of null). Help needed

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    dhaval.d.solanki is on a distinguished road

      0  

    Default


    !

  6. #6
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    dhaval.d.solanki is on a distinguished road

      0  

    Default


    it works!

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    36
    Answers
    1
    Vote Rating
    1
    DonM is on a distinguished road

      0  

    Default


    This was working great until I updated to Sencha Touch 2.1, now I can't get the template to dynamically refresh no matter what I call after setItemTpl().

    Anyone else having this issue? Anyone know of a work around?

    EDIT:
    Yes, I've followed what Rob Dougan suggested. It worked great for the first 6 months I used it for Sencha Touch 1.1 and Sencha Touch 2.0.1. When I upgraded to 2.1 it stopped working though, and now the list won't refresh after setItemTpl no matter what I call on the list.

  8. #8
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Did you follow Rob Dougan's suggestions?

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Posts
    36
    Answers
    1
    Vote Rating
    1
    DonM is on a distinguished road

      0  

    Default


    Quote Originally Posted by jay@moduscreate.com View Post
    Did you follow Rob Dougan's suggestions?
    The suggestion worked great for the first 6 months or so I was using Sencha Touch (both 1.1 and 2.0), but just over a week ago I upgraded to Sencha Touch 2.1 and now I can't get it to refresh the template dynamically anymore.

  10. #10
    Sencha User
    Join Date
    Apr 2012
    Posts
    36
    Answers
    1
    Vote Rating
    1
    DonM is on a distinguished road

      0  

    Default


    Made a simplified example, no matter what I try I can't get that template to update. It was working fine in Sencha Touch 1.1 and 2.0, but Rob Dougan's work around no longer seems to work in 2.1

    Code:
            Ext.Viewport.add(
            {
                id: 'MainList',
                xtype: 'list',
                itemTpl: '{name}',
                store:
                {
                    fields: ['name', 'position'],
                    data: [
                            { name: 'Bob', position: 'Goalie' },
                            { name: 'Tom', position: 'Left Wing' },
                            { name: 'Ralph', position: 'Defense' }
    
    
                        ]
                },
                items:
                [
                    {
                        docked: 'top',
                        xtype: 'toolbar',
                        items:
                        [
                            {
                                xtype: 'button',
                                text: 'Update Template',
                                ui: 'accept',
                                handler: function ()
                                {
                                    this.up('list').setItemTpl('{position}');
                                    this.up('list').onStoreClear();
                                    this.up('list').refresh();
                                }
                            }
                        ]
                    }
                ]
    
    
            });