Extjs4 mvc templated data not rendering

Question

I am working with the mvc nested-loading example: http://docs.sencha.com/ext-js/4-1/#!/example/app/nested-loading/nested-loading.html. While trying to build my own project out of this I ran in to a problem trying to render the data in my content view. For some reason the templated data is not loading. I have a feeling it's something to do with xtype: 'component'. I changed it to panel and I seen the border but still no data. I also included the app.jsb3 file and that does not work either. I can see the data listed in the bind method but gets added.

My json data:

[
  {id: 1, name: 'This is page one', url: 'http://my.test.com/test.html'},
  {id: 2, name: 'This is page two', url: 'http://my.test.com/test2.html'}
]

My Model:

Ext.define('TST.model.Projects', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'url']
});

My Store:

Ext.define('TST.store.Projects', {
    extend: 'Ext.data.Store',
    model: 'RLA.model.Projects',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        url : 'resources/json/projects.json'
    }
});

My Controller:

Ext.define('TST.controller.Menu', {
    extend: 'Ext.app.Controller',
    stores: ['Projects'],
    models: ['Projects'],
    refs: [
        {ref: 'mainLeftMenu', selector: 'mainleftmenu'},
        {ref: 'mainContent', selector: 'maincontent'}
    ],

    init: function() {
        this.control({   
            'mainleftmenu': { selectionchange: this.onLeftMenuChange },
        });

        this.getProjectsStore().on({
            scope: this,
            load : this.onProjectsStoreLoad
        });

    },

    onProjectsStoreLoad: function(store, records) {

        Ext.defer(function() {
            if (records.length) {
                var record = records[0];               
                this.getMainLeftMenu().getSelectionModel().select(record);
                 console.log("iamhere");
            }
        }, 500, this);
    },

    /* load the project menu items */
    onLaunch: function() {
        this.getMainLeftMenu().bindStore(this.getProjectsStore());
    },

    /* update content on new selection */
    onLeftMenuChange: function (view, records) {
        if (records.length) {
            this.showContent(records[0]);
        }
    },

    showContent: function(record) {
        this.getMainContent().bind(record);
    }

});

Here is my leftContent view:

Ext.define('TST.view.main.LeftMenu', {
    extend: 'Ext.view.View',
    alias: 'widget.mainleftmenu',

    initComponent: function() {
        Ext.apply(this, {

            id: 'leftmenu',
            dock: 'left',
            width: 200,
            border: true,
            cls: 'leftMenu',
            selModel: {
                deselectOnContainerClick: false
            },
            itemSelector: '.items',
            tpl: [
                '<div class="menuTitle">Projects</div>',
                '<tpl for=".">',
                '<div class="items">{name}</div>',
                '</tpl>'
            ]
        });

        this.callParent(arguments);
    }
});

Here is my content view:

Ext.define('TST.view.main.Content', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.maincontent',

    initComponent: function() {
        Ext.apply(this, {
           cls: 'content',
           flex: 2,
           border: false,
           autoScroll: true,
           layout: {
               type: 'hbox',
               align: 'middle',
               pack: 'center',
               availableSpaceOffset: Ext.getScrollbarSize().width
           },

            items: [
                {
                xtype: 'component',  // think it has something to do with this?
                itemId: 'contentCt',
                width: 500,
                height: 200,
                border: 2,
                tpl: [
                    '<div class="url">{url}</div>'
                ]
            }]
        });

        this.callParent(arguments);
    },

    bind: function(record) {
        this.child('#contentCt').update(record.getData());
    }
});

And firebug shows that record.getData() returns:

object { id=1, name="This is page one", url="http://my.test.com/test.html"}

Answer 1

You will need to post more code, since this works without issue:

Ext.define('TST.view.main.Content', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.maincontent',

    initComponent: function() {
        Ext.apply(this, {
            cls: 'content',
            flex: 2,
            border: false,
            autoScroll: true,
            layout: {
                type: 'hbox',
                align: 'middle',
                pack: 'center',
                availableSpaceOffset: Ext.getScrollbarSize().width
            },

            items: [{
                xtype: 'component', // think it has something to do with this?
                itemId: 'contentCt',
                width: 500,
                height: 200,
                border: 2,
                tpl: ['<div class="url">{url}</div>']
            }]
        });

        this.callParent(arguments);
    },

    bind: function(data) {
        this.child('#contentCt').update(data);
    }
}); 

Ext.onReady(function(){
    var p = new TST.view.main.Content({
        width: 500,
        height: 200,
        renderTo: document.body
    });
    p.bind({
        url: 'foo'
    });
});