sencha-touch-2 - Sencha Touch 嵌套窗体高度问题

Question

在构建视图时，我尝试在面板中嵌套一个表单面板，然后是一个面板。

所以基本上有一个这样的嵌套结构：

Ext.Panel
--Ext.form.Panel
--Ext.Panel

问题是，窗体没有高度。如果表单面板能够获得所需的高度，那就太好了。就像 CSS 中的 height: auto 一样。

有任何想法吗？

代码如下：

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Panel',
    xtype: 'myview',

    config : {
        scrollable: true,
        items : [
            {
                xtype: 'formpanel',
                items: [
                    {
                        html: 'Content in formpanel'
                    }
                ]
            },
            {
                xtype: 'panel',

                items: [
                    {
                        html: "Content in panel"
                    }
                ]
            }
        ]
    }
});

提前致谢。

Answer 1

您可以尝试使用layout和flex这样的属性：

Ext.define('MyApp.view.MyView', {
extend: 'Ext.Panel',
xtype: 'myview',

config : {
    scrollable: true,
    layout: 'vbox',
    defaults: {flex: 1},
    items : [
        {
            xtype: 'formpanel',
            items: [
                {
                    html: 'Content in formpanel'
                }
            ]
        },
        {
            xtype: 'panel',

            items: [
                {
                    html: "Content in panel"
                }
            ]
        }
    ]
}
});

您可以从这个视频中了解更多关于 Sencha Touch 2 布局的信息。希望对您有所帮助 :)

Answer 2

要在其他容器中正确显示表单面板（Ext.form.Panel，Sencha Touch 2.3+），您需要添加scrollable: null属性。查看示例

{
    xtype: 'formpanel',
    scrollable: null,         
    items: [
        ...
    ]
}