list - 在煎茶触摸面板中显示列表

Question

我基本上是在制作 2 个水平面板来分割 ipad 的屏幕。

我试图在左侧面板中显示列表，在右侧面板中显示详细视图，但无论如何我都没有得到列表。

下面是我正在使用的视图：

Ext.define("Sencha.view.Main", {
extend: 'Ext.Container',    
config: {

layout: 'hbox',

    items: [
    {
        xtype: 'panel',
        width: 300,
        items: [

                {
                    xtype: "list",
                    id:'contactlist',
                    store:'Items',
                }
                 ],
    },
    {
        xtype: 'panel',
        html: 'Message Detail view goes here ....'

    }
]
}

});

以下是我正在使用的商店：

Ext.define('Sencha.store.Items', {
extend: 'Ext.data.Store',

config: {
    model: 'Sencha.model.Item',
    defaultRootProperty: 'items',
    root: {
        items: [
            {
                text: 'Drinks',

            },
            {
                text: 'Snacks',

            }
        ]
    }
}

});

Answer 1

我认为您可能缺少列表中的 flex config 选项，如 sencha 文档和 itemTpl 中所述

{
      xtype: "list",
      id:'contactlist',
      flex: 1,
      itemTpl: {text},
      store:'Items',
}

docs：“如果该项目项目位于 Ext.layout.HBox 或 Ext.layout.VBox 布局内，则该项目的 flex。”

也没有为商店设置 storeId。storeId: '项目',