JSON rendering instead of template

[rbellow]

The following code renders out the JSON that is returned from the store into the panel. It somehow seems to be ignoring the xtemplate. No errors are thrown. The JSON is valid. Any ideas?

var xtpl = new Ext.XTemplate(
            '<div style="padding:10px 5px 5px 5px;">',
            '<tpl for=".">',
                '<div class="node" style="background:url({path});">',
                '</div>',
            '</tpl>',
            '</div>'
        );

var dv = new Ext.DataView({
    store: 'myStore',
      tpl: xtpl,
    itemSelector: 'div.node'
});

App.views.HomeIndex = Ext.extend(Ext.Panel, {
    xtype: "panel",
    items: [dv],
    scroll: 'vertical',
    styleHtmlContent: true
});
Ext.reg('home-index', App.views.HomeIndex);

[mitchellsimoens]

1. You shouldn't specify items like that when you use Ext.extend.
2. You need to have layout set to fit on your Ext.Panel subclass.

App.views.HomeIndex = Ext.extend(Ext.Panel, {
    layout : 'fit',
    scroll: 'vertical',

    initComponent: function() {
        this.items = this.buildItems();

        App.views.HomeIndex.superclass.initComponent.call(this);
    },

    buildItems: function() {
        return [
            {
                xtype : 'dataview',
                store : 'myStore',
                itemSelector: 'div.node',
                tpl : new Ext.XTemplate(
                    '<div style="padding:10px 5px 5px 5px;">',
                        '<tpl for=".">',
                            '<div class="node" style="background:url({path});">',
                            '</div>',
                        '</tpl>',
                    '</div>'
                )
            }
        ];
    }
});
Ext.reg('home-index', App.views.HomeIndex);

Yes, it's more code but it's also more proper.