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

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. 完整的源代码可以在这里找到。

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