我可以为此使用 ExtJS 表格布局吗？答案

【问题标题】：Can I use ExtJS table layout for this?我可以为此使用 ExtJS 表格布局吗？
【发布时间】：2014-12-09 18:40:44
【问题描述】：

我想将五个textareafield 组件放入一个container 中，这样它们就可以填满整个container：

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

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

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

【问题讨论】：

标签： extjs

【解决方案1】：

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

看，您可以使用表格布局，但如果您知道表格内每个容器的确切尺寸，如果您想使用比例，hbox、fit a 和 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()
    });

【讨论】：