table layouts in Sencha Architect (Ext.js project)

1
votes

I'm getting familiar with Sencha Architect due to a new project requirement and all seems to be going just fine except for working with Table Layouts. The documentation for Sencha Architect is poor, and the documentation for Table Layout for Ext.js doesn't seem to answer the question I have.

Please use this link for reference: http://fossilstudio.com/offsite/sampleLayout1/app.html

The "Table" panel is just a panel with a layout of Table and a column of 2. It contains 4 Panels. What I am trying to achieve is to get those 4 panels to take up equal amounts of horizontal and vertical space by forcing the table to be 100% height and width. This is not as intuitive as I would have hoped.

1
javascriptextjssencha-architect

1 Answers

2
votes

You should only use a table layout if you're actually wanting a table.

Use box layouts:

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'
            }]
        }]
    });
});