extjs6 layout run failed.. border layout, center region, hbox inside vbox

Question

In my extjs6 version 6.0.0.640 project, I am getting layout run failed when I populate my grid and chart. My panel's layout is set to border. In the center region I have a fit layout. Then trying to have 3 rows, but in one of the rows I want to put in a hbox. So far my layout is like this. If I remove the hbox it works, but I want to put multiple items in one of my rows.

Ext.define('ExtApplication4.view.historical.Historical', {
extend: 'Ext.panel.Panel',

xtype: 'app-historical',
controller: 'historical',
itemId: 'historicalItemId',

requires: [
    'ExtApplication4.view.historical.HistoricalController',
    'ExtApplication4.util.GlobalVar',
    'Ext.chart.*'
],

title: 'Historical',

layout: {
    type: 'border'
},

defaults: {
    split: true,
    bodyPadding: 15
},

items: [
    {
        title: 'Accounts',
        region: 'west',
        margin: '5 0 0 0',
        width: 100,
        //html: 'this is the menu account area',
        dockedItems: [
        {
            xtype: 'toolbar',
            dock: 'left',
            //cls: 'myBgCls',
            style: 'padding: 0; margin: 0;'
            //items: [
            //    {
            //        xtype: 'combobox',
            //        itemId: 'comboboxClientItemID',
            //        emptyText: 'Select Client...',
            //        editable: false,
            //        displayField: 'clientName',
            //        valueField: 'clientName',
            //        bind: {
            //            store: '{myClientListStore}',
            //            selection: '{selectedClientListModel}'
            //        },
            //        listeners: {
            //            select: 'onComboboxSelect'
            //        },
            //        queryMode: "local"
            //    }
            //]
        }
        ]
    },
    {
        title: 'Main Content',
        region: 'center',
        layout: {
            type: 'fit'
        },
        items: [
            {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [
                    {
                        xtype: 'button'                            
                    },
                    {
                        flex: 1,
                        title: 'Sector',
                        xtype: 'grid',
                        ui: 'featuredpanel-framed',
                        itemId: 'attributionSectorGridID',
                        cls: 'custom-grid',
                        margin: '0px 0px 0px 0px',
                        bind: {
                            store: '{myAttributionGroupedStore}'
                        },
                        columns: [
                            {
                                header: 'Sector',
                                dataIndex: 'Sector',
                                flex: 1
                            },
                            {
                                header: 'P&L',
                                dataIndex: 'DailyPL',
                                renderer: function (value) {
                                    var newVal;
                                    var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
                                    if (value > 0) {
                                        newVal = '<span style="color:green">' + "$" + calc + '</span>';
                                    } else if (value < 0) {
                                        newVal = '<span style="color:red">' + "$" + calc + '</span>';
                                    } else {
                                        newVal = "$" + calc;
                                    }
                                    return newVal;
                                },
                                align: 'right',
                                flex: 1
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        flex: 3,
                        layout: { 
                            type: 'hbox',
                            align: 'stretch'
                        },
                        items: [
                            {                                    
                                title: 'Winners',
                                xtype: 'grid',
                                ui: 'featuredpanel-framed',
                                itemId: 'attributionWinnersGridID',
                                cls: 'custom-grid',
                                margin: '5px 0px 0px 0px',
                                bind: {
                                    store: '{myAttributionWinnersStore}'
                                },
                                columns: [
                                    {
                                        header: 'Sector',
                                        dataIndex: 'Sector',
                                        flex: 1
                                    },
                                    {
                                        header: 'Market',
                                        dataIndex: 'ShortDesc',
                                        flex: 1
                                    },
                                    {
                                        header: 'P&L',
                                        dataIndex: 'DailyPl',
                                        renderer: function (value) {
                                            var newVal;
                                            var calc = value.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
                                            if (value > 0) {
                                                newVal = '<span style="color:green">' + "$" + calc + '</span>';
                                            } else if (value < 0) {
                                                newVal = '<span style="color:red">' + "$" + calc + '</span>';
                                            } else {
                                                newVal = "$" + calc;
                                            }
                                            return newVal;
                                        },
                                        align: 'right',
                                        flex: 1
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

});

Try removing items until it works, then add them back and you will find the item that cause this issue. — Ludovic Feltz
I did... the section that makes it break is when I add the hbox at the bottom of code. If I remove that it works. But I need to put something horizontally next to that last grid — solarissf

Alexander Alexander · Accepted Answer · 2017-05-18T14:19:08

If "Layout Run Failed" after adding a hbox layout, check all items of the container you added the hbox layout on. The items in an hbox layout require a width, either as fixed width, as percentage or using flex (the latter only works if the width of the container can be derived from somewhere).

In your case, the grid seems not to have a width. Usually, the grid width would be calculated by adding up all the column widths (the default width of a column being 100), but since at least one column has a flex set, this does not work in your case.

Similarly, if it failed after adding a vbox layout, one of the items of the container with said layout does not have a height.

extjs6 layout run failed.. border layout, center region, hbox inside vbox

1 Answers