Question

在构建视图时，我尝试嵌套formpanel，然后在面板中嵌入面板。

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

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

问题是，formpanel没有高度。如果formpanel获得它所需的高度，那将是很好的。喜欢身高：CSS中的自动。

有什么想法吗？

代码如下：

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

您可以从这个video了解有关Sencha Touch 2布局的更多信息。希望它有所帮助：）

Answer 2

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

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

Sencha Touch嵌套formpanel高度问题

2 个答案: