获取一个Ext.dataview.List实例以显示在Ext.tab.Panel实例内部

Question

我不知道如何在另一个对象中显示我的Ext.dataview.List对象。如果我尝试在视口中单独显示Ext.dataview.List对象，我可以看到我的数据。但是，如果我试图将它作为一个组件包含在另一个组件中，它会认为没有数据(从HTML输出判断)，并且似乎不会显示任何内容。

因此，如果我有一个包含以下代码的app.js：

Ext.application({
name: 'MobileUnion',
views:          ['LocalsList'],
models:         ['Local'],
stores:         ['Locals'],
launch: function() {
// Initialize the main view
var mainView = {
xtype: 'localslist'
};
Ext.Viewport.add([mainView]);
}
});

我可以这样设置MobileUnion.view.LocalsList，这会导致没有列表：

Ext.define('MobileUnion.view.LocalsList', {
extend: 'Ext.Container',
alias: 'widget.localslist',
requires: 'Ext.dataview.List',
config: {
items: [
{
itemId: 'localsList',
store: 'Locals',
loadingText: 'Loading Locals...',
emptyText: '<div>No locals found.</div>',
onItemDisclosure: true,
itemTpl: '<div>{localName}</div><div>{designation}</div>'
}
]
}
});

或者，我可以这样设置它，这会产生一个填充的列表，但不会在另一个组件中：

Ext.define('MobileUnion.view.LocalsList', {
extend: 'Ext.dataview.List',
alias: 'widget.localslist',
config: {
itemId: 'localsList',
store: 'Locals',
loadingText: 'Loading Locals...',
emptyText: '<div>No locals found.</div>',
onItemDisclosure: true,
itemTpl: '<div>{localName}</div><div>{designation}</div>'

}
});

我尝试实现这一点的原因是，我可以在选项卡面板中显示一个列表组件。

注意：我已经用所有东西组装了一个Fiddle，这里：http://www.senchafiddle.com/#6nCH8

我一定错过了一些基本的东西，但在这一点上，我浏览了文档，并购买了两本书，其中一本我已经读完了，另一本我正在编码时阅读，我仍然没有答案。如有任何帮助，我们将不胜感激。

附加代码

app/model/Local.js

Ext.define('MobileUnion.model.Local', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'dateCreated', type: 'date', dateFormat: 'c' },
{ name: 'localName', type: 'string' },
{ name: 'designation', type: 'string' }
],
}
});

app/store/Locals.js

Ext.define('MobileUnion.store.Locals', {
extend: 'Ext.data.Store',
requires: ['MobileUnion.model.Local'],
config: {
model: 'MobileUnion.model.Local',
data: [
{ localName: 'ABCD', designation: '123' },
{ localName: 'WXYZ', designation: '456' }
],
autoLoad: true,
sorters: [{ property: 'dateCreated', direction: 'DESC'}]
}
});

Answer 1

在选项1中，您定义了一个容器，但实际上并没有向容器中添加项。要将列表添加到容器中，请将xtype: 'list'添加到项目数组中。接下来要做的是将容器布局设置为合适的，否则列表将不会显示。这应该对你有用：

Ext.define('MobileUnion.view.LocalsList', {
extend: 'Ext.Container',
alias: 'widget.localslist',
requires: 'Ext.dataview.List',
config: {
layout: {
type: 'fit' //set containers layout
},
items: [
{
xtype: 'list', //add xtype
itemId: 'localsList',
store: 'Locals',
loadingText: 'Loading Locals...',
emptyText: '<div>No locals found.</div>',
onItemDisclosure: true,
itemTpl: '<div>{localName}</div><div>{designation}</div>'
}
]
}
});

关于Sencha布局的更多信息：http://docs.sencha.com/touch/2-1/#/引导/布局

祝你好运！