一个面板内部的面板：自动滚动不起作用

Question

我有一个视图（DetailsContainer，在此问题的代码部分中是第一类），其中包含两个项目（MetaDataPanel、Preview），但是在 MetaDataPanel 中自动滚动不起作用（请查看代码）。 因此，当我在 MetaDataPanel 中放置一些项目时，自动滚动就不起作用了... PS：MetaDataPanel 的内容是通过向该面板添加元素动态生成的... 有什么建议吗？

Ext.define('DP.view.DetailsContainer' ,{ 
id: 'DetailsContainer',
extend: 'Ext.Panel',
alias : 'widget.DetailsContainer',
collapsible: true,
// margins:'5 0 5 5',
split:true,
layout: {
    type: 'accordion',
    align: 'stretch',
    pack  : 'start'
},

initComponent: function() {


    Ext.apply(this, {

        items: [{
            xtype: 'MetaDataPanel',
            flex:1
        },{
            xtype: 'Preview',
            flex:2     
        }]
    });

    this.callParent(arguments);
}
});


Ext.define('DP.view.MetaDataPanel' ,{
id: 'MetaDataPanel',
extend: 'Ext.Panel',
alias : 'widget.MetaDataPanel',
title : 'MetaDati', 
layout: 'fit',
autoScroll:true, //TODO: autoscroll not working
initComponent: function() {
    Ext.apply(this, {
        items: [{
            xtype: 'component' ,
            html: 'Nessun File o Cartella selezionata. Selezionare un elemento per visualizzare i metadati!',
            margin: 5,
            style: {
                color: '#000000'
            }
        }]
    });
    this.callParent(arguments);
}
});

- Pierluigi B Web Developer

Answer 1

在具有适合布局的容器上指定autoScroll是没有意义的。子组件将始终适合容器的大小，永远不会更大，因此您永远无法滚动。您需要在内部组件上使用autoScroll。

- Evan Trimboli

Answer 2

我认为手风琴面板滚动没有意义。相反，您应该将内部组件设置为滚动。请看您的代码稍作修改以反映这个想法: http://jsfiddle.net/dbrin/jmHEj/

- dbrin

---

它可以工作！但是当我动态添加一些元素时，它又不起作用了！有什么建议吗？也许需要一些“doLayout()”？ - Pierluigi B Web Developer

没有使用do layout的extjs 4。您能具体说明要添加哪个元素到哪个组件吗？ - dbrin

我正在添加这个：form = Ext.widget('form', {autoScroll:true,layout:{type: 'vbox',align: 'stretch'},border: false, fieldDefaults: {labelAlign: 'top',labelWidth: 100,labelStyle: 'font-weight:bold'},defaults: {margins: '0 0 10 0'} ... }); - Pierluigi B Web Developer

你能否 fork 那个 JSFiddle 并添加你的代码，看看哪里出了问题？ - dbrin

Answer 3

最简单的方法（或者说是懒人方法）就是将配置项autoScroll设置为默认值，这样它就会被继承：

defaults: {autoScroll: true},

- Martin Zeitler