javascript - Sencha Architect 中的表格布局(Ext.js 项目)

Question

由于新的项目要求，我正在熟悉 Sencha Architect，除了使用表格布局外，一切似乎都很好。 Sencha Architect 的文档很差，Ext.js 的表布局文档似乎没有回答我的问题。

请使用此链接作为引用:http://fossilstudio.com/offsite/sampleLayout1/app.html

“表格”面板只是一个布局为表格，列为2的面板。它包含4个面板。我想要实现的是通过强制表格为 100% 的高度和宽度，让这 4 个面板占用相等数量的水平和垂直空间。这并不像我希望的那样直观。

Answer 1

只有在您确实需要表格时才应使用表格布局。

使用框布局:

Ext.onReady(function() {
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        width: 400,
        height: 400,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            flex: 1,
            xtype: 'container',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                flex: 1,
                title: 'P1'
            }, {
                flex: 1,
                title: 'P2'
            }]
        }, {
            flex: 1,
            xtype: 'container',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                flex: 1,
                title: 'P3'
            }, {
                flex: 1,
                title: 'P4'
            }]
        }]
    });
});