Question

每当我尝试设置布局类型覆盖时，我都会遇到布局运行失败，而我不确定导致它的原因。

我的父视图有一个tabpanel作为子项：

Ext.define('InventoryDemo.view.main.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'InventoryDemo.view.brand.Brand'
    ],

    title: '<h1>Inventory Demo</h1>',
    layout: 'border',

    items:[
        {
            ...
        },
        // This is the tab panel that I'm trying to add the container class to
        {
            xtype: 'tabpanel',
            title: 'Inventories',
            header: false,
            region: 'center',
            reference: 'inventoryTabSet'
        }
    ]
});

这是我想要在标签面板中添加标签的视图：

Ext.define("InventoryDemo.view.inventory.list.Inventory",{
    extend: "Ext.container.Container",
    xtype: 'inventory',

    ...

    closable: true,
    layout:{
        type: 'hbox',
        align: 'stretch'
    },
    items:[
        {
            xtype: 'grid',
            bind:{
                store: '{inventory}'
            },

            listeners:{
                itemclick: 'showDetails'
            },

            columns:[
                { text: 'Name', dataIndex: 'name', flex: 1 },
                { text: 'Price', dataIndex: 'price' },
                { text: 'Active', dataIndex: 'active' },
            ]
        }
    ]
});

如果我不包含布局配置，则此方法有效：

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

如果省略了，视图加载没有问题，但是当我包含hbox类型时，我得到一个运行失败。

我试着通过调用堆栈查看，但老实说，我仍然要绿色到sencha以查看导致错误的原因：

[E]布局运行失败日志@ ext-all-rtl-debug.js？_dc = 1444523987794：8732logx @ ext-all-rtl-debug.js？_dc = 1444523987794：8768Ext.apply.log.log.error @ ext-all-rtl-debug.js？_dc = 1444523987794：8771Ext.define.handleFailure @ ext-all-rtl-debug.js？_dc = 1444523987794：214144Ext.define.runComplete @ ext-all-rtl-debug.js？ _dc = 1444523987794：214616callOverrideParent @ EXT-ALL-RTL-debug.js _dc = 1444523987794：1348Ext.Base.Base.addMembers.callParent @ EXT-ALL-RTL-debug.js _dc = 1444523987794：11711Ext.override.runComplete @ ext-all-rtl-debug.js？_dc = 1444523987794：61413Ext.define.run @ ext-all-rtl-debug.js？_dc = 1444523987794：214610Ext.define.statics.flushLayouts @ ext-all-rtl-debug。 js？_dc = 1444523987794：61421Ext.define.statics.resumeLayouts @ ext-all-rtl-debug.js？_dc = 1444523987794：61436Ext.resumeLayouts @ ext-all-rtl-debug.js？_dc = 1444523987794：66954Ext.define。 notify @ ext-all-rtl-debug.js？_dc = 1444523987794：92658Ext.define.onTick @ ext-all-rtl-debug.js？_dc = 1444523987794：92677（匿名函数）@ ext-all-rtl-deb ug.js？_dc = 1444523987794：6416（匿名函数）@ ext-all-rtl-debug.js？_dc = 1444523987794：6606 3ext-all-rtl-debug.js？_dc = 1444523987794：8732 [E]布局运行失败日志@ ext-all-rtl-debug.js？_dc = 1444523987794：8732logx @ ext-all-rtl-debug.js？_dc = 1444523987794：8768Ext.apply.log.log.error @ ext-all-rtl-debug.js？_dc = 1444523987794：8771Ext.define.handleFailure @ ext-all-rtl-debug.js？_dc = 1444523987794：214144Ext.define。 runComplete @ ext-all-rtl-debug.js？_dc = 1444523987794：214616callOverrideParent @ ext-all-rtl-debug.js？_dc = 1444523987794：1348Ext.Base.Base.addMembers.callParent @ ext-all-rtl-debug。 js？_dc = 1444523987794：11711Ext.override.runComplete @ ext-all-rtl-debug.js？_dc = 1444523987794：61413Ext.define.run @ ext-all-rtl-debug.js？_dc = 1444523987794：214610Ext.define。 statics.flushLayouts @ ext-all-rtl-debug.js？_dc = 1444523987794：61421Ext.define.statics.resumeLayouts @ ext-all-rtl-debug.js？_dc = 1444523987794：61436Ext.resumeLayouts @ ext-all-rtl- debug.js？_dc = 1444523987794：66954privates.statics.notify @ ext-all-rtl-debug.js？_dc = 1444523987794：116731privates.statics.onTimer @ ext-all-rtl-debug.js？_dc = 1 444523987794：116750Ext.Function.fireHandlers @ ext-all-rtl-debug.js？_dc = 1444523987794：6303

在尝试使用除默认值之外的任何布局类型时，是否有关于如何设置视图会导致失败的问题？

Answer 1

当容器的布局设置为hbox时，该容器的子容器应具有flex或width。如果您为flex指定width或grid，那么您将不会面临布局运行失败。

这是一个小提琴： https://fiddle.sencha.com/#fiddle/v9a

布局运行失败

1 个答案: