PDA

View Full Version : How to include my XTemplate classes



jeanluca
12 Sep 2012, 12:00 AM
Hi

To have my html a bit seperated from the rest, I have created in the app/view directory a 'template' directory. In here I have a file called SearchListItem.js:


Ext.define('My.view.template.SearchListItem', {
extend: 'Ext.XTemplate',

constructor: function (config) {
this.callParent(['<div style="padding-left: 20px;">',
'<div style="width:100%;float:left;position:relative">{label}</div>',
'<img src="{icon}" style="float:left;position:relative;width:20px;right:20px;margin-left:-100%;height:20px;" />',
'</div>']
);
}
}) ;
Now in app/view I have a list defined in SearchView.js as follows


Ext.define('My.view.SearchView', {
extend: 'Ext.dataview.List',
xtype: 'mylist',
requires: [
'My.view.template.SearchListItem',
'Ext.plugin.PullRefresh',
'Ext.plugin.ListPaging'
],

config: {
itemTpl: new My.view.template.SearchListItem(),
loadingText : 'Loading...',
....

As you can see, in the list I have required the SearchListItem. Unfortunately, this doesn't work and in the browser I get the error


Uncaught TypeError: Cannot read property 'template' of undefined

Now, when I add the require statement to app.js it works. Can someone explain to me why it doesn't work in the first place ? Should I define the template directory somewhere too ?

Thanks a lot
Luca

haduki
12 Sep 2012, 8:19 PM
new My.view.template.SearchListItem()should be
Ext.create('My.view.template.SearchListItem',{})

jeanluca
12 Sep 2012, 11:15 PM
thanks, thats it!!