Adding padding to elements in layout 'fit' adds empty space on top

Question

I want to create a table-like structure in ExtJs with labels and check boxes. Normally, I'd use a panel with layout 'vbox' to stack a series of panels with layout 'hbox'. That way I get a structure like:

vbox
|
\|/ 
John Doe [] [] [] [] <- hbox
Jane Doe [] [] [] [] <- hbox

The records are loaded dynamically from a data source. That means I can't use the 'table' layout which is deprecated anyway.

The 'vbox' however doesn't handle overflow well enough. It simply clips it, though I want scroll bars. So I chose layout 'fit', which currently expands the 'fit' panel so it accommodates all the records. That will do as well as scroll bars, which I'd probably get anyway if I specified a height.

I want padding around the elements though and when I add that, it goes wrong. The first record expands tremendously in size.

The size comes in the page from the following element:

div class="x-panel-body x-panel-body-noheader x-box-layout-ct" id="ext-gen82" style="width: 1621px; height: 2680px;"

I have a padding of 10px and 135 records, so it seems the height is 134 times the padding in both directions.

I have tried to keep the 'vbox' panel and wrap it inside a 'fit' panel, but that still created empty space and ruined the layout.

I have a similar problem elsewhere in the app and I have been working on it for many days now. I'd greatly appreciate any help!

Code as requested below

        var pnlRelations = new Ext.Panel({
            autoScroll: true,
            frame: true,
            id: 'pnlRelations',
            title: 'Servers',
            renderTo: 'pnlServers',
            layout: 'fit',                
            items: [

            ],
            buttons: [
                { text: 'Opslaan', handler: submit }
            ]
        });

        var storeServerMaintenance = new Ext.data.Store({
            id: 'storeServerMaintenance',
            autoLoad: true,
            proxy: new Ext.data.HttpProxy({ url: '<%= Url.Action("ListMaintenanceServer", "Maintenance") %>' }),
            reader: new Ext.data.JsonReader({
                    //                totalProperty: 'records',
                    idProperty: 'Id',
                    root: 'rows'
                },
                <%= ServerMaintenanceListItem.ToColumnModel() %>

            ),
            /*remoteSort: true*/
            listeners: {
                load: function (store, records, ops) {
                    nrOfRecords = records.length;
                    for (var i = 0; i < records.length; i++) {
                        var rec = records[i];
                        var serverId = rec.get('Id') == null ? null : rec.get('Id');
                        var relationId = rec.get('RelationId') == null ? null : rec.get('RelationId');
                        var q1 = rec.get('Q1') != null && rec.get('Q1');
                        var q2 = rec.get('Q2') != null && rec.get('Q2');
                        var q3 = rec.get('Q3') != null && rec.get('Q3');
                        var q4 = rec.get('Q4') != null && rec.get('Q4');
                        pnlRelations.add(new Ext.Panel({
                            layout: 'hbox',
                            //                                defaults: { margins: 10 },
                            style:{padding:'10px'},
                            items: [
                                new Ext.form.Label({ html: rec.get('RelationName'), width: labelWidth }),
                                new Ext.form.Label({ html: rec.get('Name'), width: labelWidth }),
                                new Ext.form.Label({ id: 'idx_' + i, html: '' + rec.get('Index'), width: boxWidth }),
                                new Ext.form.Checkbox({ id: 'cbQ1_' + i, width: boxWidth, checked: q1 }),
                                new Ext.form.Checkbox({ id: 'cbQ2_' + i, width: boxWidth, checked: q2 }),
                                new Ext.form.Checkbox({ id: 'cbQ3_' + i, width: boxWidth, checked: q3 }),
                                new Ext.form.Checkbox({ id: 'cbQ4_' + i, width: boxWidth, checked: q4 }),
                                new Ext.form.Hidden({ id: 'hfServer_' + i, value: serverId }),
                                new Ext.form.Hidden({ id: 'hfRelation_' + i, value: relationId })
                            ]
                        }));
                    }
                    //                        debugger;
                    pnlRelations.doLayout();
                }
            }
        });

Btw. did you try with property: columns ? For example: layout: hbox, columns: 5 — Paweł Głowacz
@PawełGłowacz I have added the code. I did not see a mention of columns in the documentation of the hbox layout. I just tried it and it works exactly the same: still a huge gap below the first record. — Paul1977

vitaluha vitaluha · Accepted Answer · 2015-07-29T20:31:56

try

layout: {
    type: 'hbox',
    align: 'stretch'
}

And add

flex: 1

into each of your "items"

Adding padding to elements in layout 'fit' adds empty space on top

2 Answers