Question

我想将五个textareafield个组件放入container，以便填充整个container：

    33%       33%       33%
+---------+---------+---------+
|         |         |         | 50%
|         |         |         |
|         +---------+---------+
|         |         |         | 50%
|         |         |         |
+---------+---------+---------+

是否有比vbox容器内的两个hbox容器更好的布局？

这看起来更像是表格布局。但是，如何告诉textareas在table布局中填满整个屏幕，以及表格列应该占据33％的宽度？

Answer 1

我会使用一个主box容器，里面有三个面板，一个fit和两个vbox，始终设置flex:1。

看，您可以使用表格布局但如果您知道表格中每个容器的确切尺寸，如果您想使用比例hbox，fit和vbox是最好的方式（这就是他们在那里的原因）。

Ext.define('Fiddle.view.MyPanel', {
        extend: 'Ext.panel.Panel',

        requires: [
            'Ext.panel.Panel',
            'Ext.form.field.TextArea'
        ],


        height: 400,
        width: 600,
        title: 'My textarea table',

        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items: [
            {
                xtype: 'panel',
                flex: 1,
                layout: 'fit',
                items: [
                    {
                        xtype: 'textareafield',
                        fieldLabel: 'Label'
                    }
                ]
            },
            {
                xtype: 'panel',
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [
                    {
                        xtype: 'textareafield',
                        flex: 1,
                        fieldLabel: 'Label'
                    },
                    {
                        xtype: 'textareafield',
                        flex: 1,
                        fieldLabel: 'Label'
                    }
                ]
            },
            {
                xtype: 'panel',
                flex: 1,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [
                    {
                        xtype: 'textareafield',
                        flex: 1,
                        fieldLabel: 'Label'
                    },
                    {
                        xtype: 'textareafield',
                        flex: 1,
                        fieldLabel: 'Label'
                    }
                ]
            }
        ]

    });

    Ext.create('Fiddle.view.MyPanel',{
        renderTo: Ext.getBody()
    });

我可以使用ExtJS表格布局吗？

1 个答案: