我可以使用ExtJS表布局进行此操作吗？_Extjs

我可以使用ExtJS表布局进行此操作吗？

extjs

我可以使用ExtJS表布局进行此操作吗？,extjs,Extjs,我想将五个textareafield组件放入一个容器，这样它们就可以填充整个容器： 33% 33% 33% +---------+---------+---------+ | | | | 50% | | | | | +---------+---------+ | | | | 50% | |

我想将五个

textareafield

组件放入一个

容器

，这样它们就可以填充整个

容器

：

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

在

hbox

容器中使用两个

vbox

容器，还有比这更好的布局吗

这看起来更像一个表格布局。但是我怎样才能告诉textareas在

表格

布局中填充整个屏幕，告诉table列它们应该占33%的宽度呢？

我会使用一个主

框

容器，里面有三个面板，一个

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()
    });