我正在使用mvc嵌套加载示例:http://docs.sencha.com/ext-js/4-1/#!/example/app/nested-loading/nested-loading.html。在尝试从此构建我自己的项目时,遇到了一个问题,试图在我的内容视图中呈现数据。出于某种原因,模板数据未加载。我有一种感觉,这与xtype:'component'有关。我将其更改为面板,我看到了边框,但仍然没有数据。我还包括了app.jsb3文件,这也不起作用。我可以看到绑定方法中列出的数据,但会被添加。Extjs4 mvc模板数据不呈现
我的JSON数据:
[
{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'}
]
我的模型:
Ext.define('TST.model.Projects', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'url']
});
我的商店:
Ext.define('TST.store.Projects', {
extend: 'Ext.data.Store',
model: 'RLA.model.Projects',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'resources/json/projects.json'
}
});
我的控制器:
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);
}
});
这里是我的leftContent观点:
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);
}
});
这里是我的内容视图:
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());
}
});
而且萤火显示,record.getData()返回:
object { id=1, name="This is page one", url="http://my.test.com/test.html"}
你在哪里调用绑定?当你通过代码时会发生什么? –
视图中的绑定方法返回了如上所示的数据。这个.child确实存在。当我介入绑定方法时,我可以查看手表中组件的所有属性。出于某种原因,它只是不更新组件,我认为? – robasc