Question

我有一个'卡'布局，其中一个项目是'手风琴'类型布局，包含大量项目。问题是由于手风琴标题被放置在内容之上，因此无法看到某些项目的内容。

设置autoScroll:true不起作用，因为显然布局的高度是由标题高度（而不是当前元素高度）的总和来感知的。

var accordion= {

    id:'items-info',
    title: 'Items Info',
    layout:'accordion',
    bodyBorder: false,  
    bodyStyle: 'background-color:#DFE8F6;display:block;',  
    autoScroll:true,
    items: [{
        title: 'Title',
        html: '<p>Item</p><p>This content just get lost</p>'
    },{
        title: 'Title',
        html: '<p>Item</p><p>This content just get lost</p>'
    },{
        title: 'Title',
        html: '<p>Item</p><p>This content just get lost</p>'
    },{
        title: 'Title',
        html: '<p>Item</p><p>This content just get lost</p>'
    },{
        title: 'Title',
        html: '<p>Item</p><p>This content just get lost</p>'
    },{
        title: 'Title',
        html: '<p>Item</p><p>This content just get lost</p>'
    },{
        title: 'Title',
        html: '<p>Item</p><p>This content just get lost</p>'
    },{
        title: 'Title',
        html: '<p>Item</p><p>This content just get lost</p>'
    },{
        title: 'Title',
        html: '<p>Item</p><p>This content just get lost</p>'
    },{
        title: 'Title',
        html: '<p>Item</p><p>This content just get lost</p>'
    }]

};

Answer 1

如果您为项目面板指定fit布局，它应该可以正常工作：

{
    title: 'Title',
    layout: 'fit',
    html: '<p>Item</p><p>This content just get lost</p>'
}

如果没有，您的bodyStyle配置可能会覆盖一些处理问题的样式属性。

Answer 2

如何使用activeOnTop: true？

Answer 3

这个怎么样：

Ext.create('Ext.panel.Panel', {
        width: '100%',
        height: 200,
        layout:'accordion',
        defaults: {
            autoScroll:true
        },
        ...
});

手风琴高度和ExtJS中的滚动

3 个答案: