手风琴布局未显示底部堆叠的封闭式面板

Question

通常手风琴小组会扩展第一个儿童小组和其他小组。标题将堆叠在底部。但对我而言，没有任何专门小组。标题底部可见。它只是空的。见屏幕截图。

但我实际上有3个表格面板。

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'center',
        html: '<h3>Some text. Lorem ipsom?</h3>'
    },{
        region: 'east',
        layout: 'accordion',
    width: 300,
    items: [loginForm, regForm, passForm]
    }]
});

这是为什么？我该如何解决这个问题？

我正在使用Ext 4.0.7。可以找到完整的来源here。

Answer 1

我希望在Accordion Layout中你不应该为你为loginForm提供的面板给出高度。

身高：150，

Answer 2

这是由标题div元素引起的。通常视口呈现为document.body。如果找到任何现有元素，则无法替换它。相反，它会附加输出。所以这里发生的是2个组件/元素被渲染。首先是现有的标题div，然后是视口。标头div在视口顶部占用一些空间。然后，相同的空间在底部的视口上不可见。要解决此问题，请将现有元素html作为面板放在视口中。将其区域保持为north。

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
            region: 'north',
            html: header.html // <------- Add html of `div#head` here
            height: 300  // <------- put a height too.

        },{
            region: 'center',
            html: '<h3>Some text. Lorem ipsom?</h3>'
        },{
            region: 'east',
            layout: 'accordion',
            width: 300,
            items: [
                    loginForm, regForm, passForm
            ]
        }]
});