0

我有一个Ext.Panelwith a 'toolbar'，它可以容纳可变数量的内容<div>，我想确保它足够大以包含所有内容。有没有办法动态调整工具栏的大小以适应其内容？

例如，当我向 中添加多行时<div>，它们会被截断。该layout: 'fit'属性使其相对于父容器保持包含，但是如何扩展它以包含所有子内容？

工具栏在面板中定义如下（然后将其添加到'card'面板布局中）。

    var panelTitle = 'Old McStopher's Panel'
    this.listpanel = new Ext.Panel({
        title: panelTitle,
        items: this.list,
        layout: 'fit',
        dockedItems: {
            xtype: 'toolbar',
            html: '<div class="statsTpl">Old McStopher's Content</div>',
            title: panelTitle
        }
    });

我正在使用 SASS/SCSS。有推荐的方法吗？或者是否为工具栏本身设置了一些属性？

4

2 回答 2

1

Ext.Toolbar直接从 Ext.Container 继承，因此具有布局选项。如果您为工具栏提供不同的布局，autocontainer或者fit您应该能够在title扩展工具栏的同时使该属性起作用。

于 2011-07-02T21:19:00.827 回答
0

因此，目前的答案是简单地删除xtype: 'toolbar'. 标题没有显示，但这不是问题，因为<div>它将包含所有需要的内容（包括标题，如果需要）。因为内容仍然在 dockedItems 中，所以它仍然停靠在顶部，不会像this.list内容那样滚动。因此，人们可以争论这在技术上是否适合“工具栏”，但最终结果是动态适合顶部内容。

于 2011-06-27T16:55:16.073 回答