PDA

View Full Version : How to override tpl of children items during parent class create?



basememara
4 Feb 2012, 11:15 AM
In my viewport, I am trying to pass a custom template to one of the children components like this:


var w = Ext.create('widget.somelist', {
title: 'Custom Test',
customTpl: [
'<tpl for=".">',
'<div class="title">{Name} ZZZZ</div>',
'</tpl>'
]
});

//TRIED THIS TO
w.setCustomTpl( [ '<tpl for=".">',
'<div class="title">{Name} ZZZZ</div>',
'</tpl>'
]);
}


This is what my class looks like, but this.customTpl remains null and never gets the value passed by the viewport:


Ext.define('MyApp.ui.SomeList', {
extend: 'Ext.Panel',
alias: 'widget.somelist',

customTpl: null,


items: [
{
xtype: 'dataview',
store: 'Something',
itemTpl: this.customTpl || [
'<tpl for=".">',
'<div class="title">{Name}</div>',
'</tpl>'
]
}
]
});


Any ideas on how to pass a custom template to the child during the class create?

basememara
4 Feb 2012, 11:34 AM
I think this is what you do (which works!):


var w = Ext.create('widget.somelist', {
title: 'Custom Test',
customTpl: [
'<tpl for=".">',
'<div class="title">{Name} ZZZZ</div>',
'</tpl>'
]
});




Ext.define('MyApp.ui.SomeList', { extend: 'Ext.Panel',
alias: 'widget.somelist',

//CUSTOM PROPERTIES
customTpl: null,

initComponent: function() {
//OVERRIDE CHILDREN TEMPLATES IF APPLICABLE
if (this.customTpl) {
this.items[0].itemTpl = this.customTpl;
}
this.callParent(arguments);
},

items: [
{
xtype: 'dataview',
store: 'Something',
itemTpl: this.customTpl || [
'<tpl for=".">',
'<div class="title">{Name}</div>',
'</tpl>'
]
}
]
});

I have a feeling that the new "config" properties that were introduced in Touch 2 would make this cleaner. Is there a better way to do this with Ext JS 4.1?