extjs 布局运行失败.. 边界布局、中心区域、vbox 内的 hbox

Question

在我的 extjs6 版本 6.0.0.640 项目中，当我填充我的网格和图表时，布局运行失败。 我的面板布局设置为边框。在中心区域，我有一个合适的布局。然后尝试有 3 行，但在其中我想放入 hbox 的行中。到目前为止，我的布局是这样的。如果我删除 hbox 它可以工作，但我想将多个项目放在我的一行中。

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
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

});

Answer 1

如果在添加 hbox 布局后出现“布局运行失败”，请检查您添加了 hbox 布局的容器的所有项目。 hbox 布局中的项目需要宽度，可以是固定宽度、百分比或使用flex（后者仅适用于容器的宽度可以从某个地方得出）。

在您的情况下，网格似乎没有宽度。通常，网格宽度将通过将所有列宽相加来计算（一列的默认宽度为 100），但由于至少有一列设置了flex，因此这不适用于您的情况。

同样，如果添加vbox布局后失败，则具有该布局的容器中的一项没有高度。