我正在尝试编写我的第一个简单的 mvc 应用程序。我有一个主视图和一个产品视图。我也有一个主控制器。我的产品视图扩展了 Ext.List。我的问题是即使我设置了数据和 itemTpl，列表也没有显示任何内容。这是我的代码：
应用程序.js
Ext.application({
name: 'SenchaTest',
controllers: ['Main'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
Ext.create('SenchaTest.view.Main');
},
});
查看/Main.js
Ext.define('SenchaTest.view.Main', {
extend: 'Ext.TabPanel',
requires:['Ext.data.Store'],
config: {
fullscreen: true,
items:[
{
xtype:'productspage',
title:'Products',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
],
itemTpl:'{title}'
}
]
},
initialize: function() {
console.log('Main view initialize');
}
});
查看/Products.js
Ext.define('SenchaTest.view.Products', {
extend: 'Ext.List',
xtype: 'productspage',
initialize: function() {
console.log('Products view initialize');
},
});
控制器/Main.js
Ext.define('SenchaTest.controller.Main',{
extend: 'Ext.app.Controller',
config:{
views:['Main', 'Products'],
},
launch: function() {
console.log('Main Controller launch');
},
init: function() {
console.log('Main Controller init');
}
});
这是我的控制台中显示的内容：
Main Controller init
Products view initialize
Main view initialize
Main Controller launch
所以我的视图和控制器被启动。但我的产品列表中没有显示任何内容。列表组件似乎已加载，因为拖动它时我可以看到滚动条。
奇怪的是，如果我将 xtype: 'productspage' 更改为 xtype:'list' .... 它可以工作....但是我的产品视图扩展了 Ext.List ... 所以不一样吗？