Extjs4 mvc templated data not rendering - model-view-controller

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'
});
});