Javascript Sencha Touch：如何在hbox面板中创建列表

我有一个导航视图，其中包含一个选项卡视图，我想在其中添加一个hbox面板，其中包含cotnains和list以及另一个并排的面板。但是，当我尝试将列表添加到面板时，什么都没有显示。我想知道怎么可能做到这一点 导航视图

Ext.define('MyApp.view.Navigation', {
    extend: 'Ext.navigation.View',
    id: 'NavView',
    xtype: 'navigationcard',
    onBackButtonTap: function () {
        //if on forms screen and button is visible remove add form button
        var self = Ext.getCmp('NavView');
        var naviBtn = Ext.getCmp('addNewFormBtn');
        if (naviBtn != null) {
            naviBtn.hide();
        }
        self.pop();
    },
    config: {
        title: 'Schedule',
        iconCls: 'settings',
        navigationBar: {
            items: [{
                xtype: 'button',
                text: 'Add New Form',
                align: 'right',
                id: 'addNewFormBtn',
                hidden: true,
                handler: function () {

            }
            }]
        },
        //we only give it one item by default, which will be the only item in the 'stack' when it loads
        items: [
                   {
                       xtype: 'mainview'
                   }
        ]
    }
});

选项卡面板

Ext.define('MyApp.view.Main', {
    extend: 'Ext.TabPanel',
    xtype: ['mainview', 'widget.mainview'],
    config: {
        title:'MyApp',
        fullscreen: true,
        tabBarPosition: 'bottom',
        defaults: {
            styleHtmlContent: true
        },
        items: [
            contain ,
            { xtype: 'settingscard' }
        ]
    }

});

带有Hbox和列表的面板

var testData = [];
for (var i = 0; i < 40; i++)
{ testData.push({ txt: "test" }); }

var storesdasd = Ext.create('Ext.data.Store', {
    data: testData
});

var contain = Ext.create('Ext.Panel', {
    fullscreen: true,
    layout: 'hbox',
    title: 'Schedules',
    iconCls: 'time',
    items: [{
        xtype: 'list',
        itemTpl: '{txt}',
        store: storesdasd,
        flex: 1,
        height: 'auto'
    }

    , {
        html: 'message preview',
        style: 'background-color: #759E60;',
        flex: 2,
        height: '100'
    }],
    config: {
        title: 'Schedules',
        iconCls: 'time'
    }
});

var testData=[]；
对于（变量i=0；i<40；i++）
{testData.push（{txt:“test”}）；}
var storesdasd=Ext.create（'Ext.data.Store'{
数据：testData
});
var contain=Ext.create（'Ext.Panel'{
全屏：对，
布局：“hbox”，
标题：‘附表’，
iconCls:“时间”，
项目：[{
xtype:'列表'，
itemTpl:“{txt}”，
商店：storesdasd，
弹性：1，
高度：“自动”
}
, {
html:“邮件预览”，
样式：“背景色：#759E60；”，
弹性：2，
身高：“100”
}],
配置：{
标题：‘附表’，
iconCls:“时间”
}
});

使用：

---

删除子项上的高度配置。同时删除包含面板上的全屏配置。

我没有将所有这些部分分别放在不同的文件中，而是将它们放在

Ext.application

的启动功能中，这似乎起到了作用，尽管不确定原因

layout: {
    type: 'hbox',
    align: 'stretch'
}