Sencha Touch 嵌套窗体高度问题答案

【问题标题】：Sencha Touch nested formpanel height issueSencha Touch 嵌套窗体高度问题
【发布时间】：2013-01-22 17:00:58
【问题描述】：

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

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

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"
                    }
                ]
            }
        ]
    }
});

提前致谢。

【问题讨论】：

标签： sencha-touch-2

【解决方案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"
                }
            ]
        }
    ]
}
});

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

【讨论】：

【解决方案2】：

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

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

【讨论】：