How to include my XTemplate classes

[jeanluca]

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]

new My.view.template.SearchListItem()

should be

  Ext.create('My.view.template.SearchListItem',{})

[jeanluca]

thanks, thats it!!