[PR2] How to change list itemTpl dynamically?

[Surykat]

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

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

{
	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?

[jay@moduscreate.com]

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

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

[rdougan]

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

list.setItemTpl('<div>{text}....</div>');
list.onStoreClear();
list.refresh();

I haven't tested this, in in theory it should work.

[Surykat]

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:

...


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

[dhaval.d.solanki]

!

[dhaval.d.solanki]

it works!

[DonM]

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.

[jay@moduscreate.com]

Did you follow Rob Dougan's suggestions?

[DonM]

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.

[DonM]

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

        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();
                            }
                        }
                    ]
                }
            ]


        });