Sencha touch 2 tab.panel中的列表覆盖其他面板

我正在用Sencha Touch 2创建一个应用程序，结果出现了一个奇怪的行为。我已经创建了一个tab.panel来保存不同的详图视图。其中一个视图是列表

目前，我的tab.panel中只有两个面板。当我将列表声明为第一个对象，将html选项卡声明为第二个对象时，一切正常。但是，当我将列表定义为第二个元素时，它将覆盖另一个选项卡，因此它将根本不可见

这种行为是什么？我如何避免

这是我的密码：

tab.panel-Container：

Ext.define('my.view.DetailsContainer', {
extend: 'Ext.tab.Panel',
xtype: 'DetailsContainer',
alias: 'DetailsContainer',
id: 'DetailsContainer',

config: {
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },
    activeItem: 0,

    items: [
        {
            xtype: 'ListView'
        },
        {
            xtype: 'DetailsInfo'
        }


    ]
},

updateData: function() {
    this.callParent(arguments);
    this.query('#DetailsInfo')[0].setData(this.getData());

    this.fireEvent('loadInfos', '', this.getData().object);
}
});

列表视图：

Ext.define('my.view.ListView', {
extend: 'Ext.Panel',
xtype: 'ListView',
alias: 'ListView',

requires: [
    'Ext.dataview.List'
],

config: {
    title: 'Services',
    iconCls: 'more',
    layout: 'fit',

    items: {
        xtype: 'list',
        store: 'services',
        //Bei Klick auf ItemDisclosurebutton zeige nähere Informationen zum Service
        onItemDisclosure: function(store, item) {
            var service = item.getRecord().serviceid;
            console.log(service);
        },
        itemTpl: '<div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>' +
            ' {label}' +
            '</div>'
    }
}
});

Ext.define（'my.view.ListView'{
扩展：“Ext.Panel”，
xtype:“ListView”，
别名：“ListView”，
要求：[
“Ext.dataview.List”
],
配置：{
标题：“服务”，
iconCls：“更多”，
布局：“适合”，
项目：{
xtype:'列表'，
商店：'服务'，
//Bei Klick auf ItemDispositionButton zeige nähere Information en zum服务
OSCLOSURE：功能（商店、物品）{
var service=item.getRecord（）.serviceid；
控制台日志（服务）；
},
itemTpl:'+
“{label}”+
''
}
}
});

html视图：

Ext.define('my.view.DetailsInfo', {
extend: 'Ext.Panel',
xtype: 'DetailsInfo',
alias: 'DetailsInfo',
id: 'DetailsInfo',

config: {
    scrollable: 'vertical',
    layout: 'fit',
    iconCls: 'info',
    title: 'Info',

    html: '<p>My data</p>'
}
});

Ext.define（'my.view.DetailsInfo'{
扩展：“Ext.Panel”，
xtype:'DetailsInfo'，
别名：“DetailsInfo”，
id:'DetailsInfo'，
配置：{
可滚动：“垂直”，
布局：“适合”，
iconCls:'信息'，
标题：“信息”，
html:“我的数据”
}
});

对我来说似乎很好。可以我已经玩了一点我的代码，你是对的。这个最小的例子对我也适用。在我的real应用程序中，我使用show and hide事件在标题栏中注册一个选择器按钮。这似乎导致了上述行为。发现了我的错误。是那个坐在键盘前的白痴。我扩展了hide函数，没有调用

this.callParent（参数），因此我最终重写了隐藏函数。但奇怪的是，它将列表作为第一项使用。。。