Question

我正在使用Sencha Touch 2创建一个应用程序，并得到一个奇怪的行为。我创建了一个tab.panel来保存不同的详细视图。其中一个观点是一个列表。

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

这是什么行为，我该如何避免呢？

这是我的代码：

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

html-view：

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

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

0 个答案: