Question

我无法在容器中放置网格面板。这是我的布局示例。请忽略任何大括号，我想给出我设计的高级布局结构。

问题：在此示例中，即在第三个容器中，我无法在其中放置面板和网格。当我删除网格时，布局工作正常，当我放置网格时，所有布局似乎都是空白，我也看不到其他组件，也没有收到任何控制台错误。我甚至尝试为容器指定固定的宽度和高度。问题在于组件的布局和显示。

任何建议都会受到赞赏。

extend: 'Ext.form.Panel',
items: [{
            xtype: 'container',
            layout: 'vbox',
            items: [{
               xtype: 'container',
               layout: 'hbox',
               items: [{-----}]
            },{
               xtype: 'container',
               layout: 'hbox',
               items: {
                       xtype: 'panel',
                       title: 'Hours of Operation',
                        itemId: 'hoursOfOperationPanel',
                        items: {
                           xtype: 'grid',
                           store: hoursStore,
                        }
                 },
            },{
               xtype: 'container',
               layout: 'hbox',
               items: [{-----}]               
            }]
      }]

Answer 1

除了在容器中使用容器外，您还可以按以下所述尝试，方法是将项目包括在容器中并为它们定义默认布局。您可以清楚地在一个层次上找到元素及其对应的子元素。

Ext.apply(me, {
        items: [{
            xtype: 'container',
            layout: 'vbox',
            defaults: {
                layout: 'hbox',
                flex: 1,
                width: '100%',
                defaults: {
                    height: '100%'
                }
            },
            items: [{
                items: [{

                }]
            },{
                items: [{

                }]
            }]
        }],
});

Answer 2

这里的问题是过分和/或错误使用布局。仅从您上面给出的示例来看，这将更合适：

if(!('nextElementSibling' in document.documentElement))
{
    Object.defineProperty(Element.prototype, 'nextElementSibling',
    {
        get: function()
        {
            var e = this.nextSibling;
            while (e && e.nodeType !== 1)
                e = e.nextSibling;

            return e;
        }
    });
}

标题中需要包含现代工具包版本的原因。 Modern的网格不是面板，因此没有标题，因此您可以嵌套在面板中（具有合适的布局），也可以为网格提供停靠的标题栏。

Ext JS：无法将网格面板放置在容器中

2 个答案: