javascript - Sencha Architect 中的表格布局（Ext.js 项目）

Question

由于新的项目需求，我开始熟悉 Sencha Architect，除了使用 Table Layouts 之外，一切似乎都很好。Sencha Architect 的文档很差，Ext.js 的 Table Layout 的文档似乎没有回答我的问题。

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

“表格”面板只是一个布局为 Table 且列为 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'
            }]
        }]
    });
});