sencha touch 2 列表 100% 高度

Posted 2023-02-25

【中文标题】sencha touch 2 列表 100% 高度

【英文标题】：sencha touch 2 list 100% height

【发布时间】：2012-03-21 10:00:31

【问题描述】：

2 个面板：

Ext.create('Ext.Container', 
    fullscreen: true,
    layout: 'hbox',
    items: [
        
            xtype: 'panel',
            html: 'message list',
            flex: 1,
            items: [
                
                    xtype: 'list',
                    itemTpl: 'title',
                    data: [
                         title: 'Item 1' ,
                         title: 'Item 2' ,
                         title: 'Item 3' ,
                         title: 'Item 4' 
                    ]
                
            ]
        ,
        
            xtype: 'panel',
            html: 'message preview',
            flex: 3
        
    ]
);

第一个面板列表对象中没有指定高度属性，因此无法显示。如何在 xtype: 'list' 中设置 100% 高度？

【参考方案1】：

您需要为列表容器提供一个布局，以便它知道拉伸其子项（列表）。

layout: 'fit'

使用 fit 将告诉您的面板使所有子项（仅在您的情况下的列表）伸展到您的面板的大小。

Example of this on Sencha Fiddle.

And here is a great guide on all the available layouts in Sencha Touch 2.0.

【讨论】：

Sencha 文档提到了这一点......“请注意，如果您将多个项目添加到具有合适布局的容器中，则只有第一个项目可见。”

关键是它不会像预期的那样工作——一个可见的项目将扩展以适应空间——而不是容器扩展以适应所有子项目。

正确，但是在这种情况下，容器只有 一个 子元素，即 list，我们希望将其拉伸到容器的大小。所以 fit 是合适的布局。