sencha touch 2 list 100%height

Question

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%的高度？

Answer 1

您需要为列表容器提供一个布局,以便它知道要拉伸其子项(列表).

layout: 'fit'

使用fit会告诉您的面板让所有孩子(只有您的情况下的列表)伸展到面板的大小.

Sencha Fiddle的例子.

这里是Sencha Touch 2.0中所有可用布局的精彩指南.