Question

我有Ext.Panel '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。是否有推荐的方法这样做？或者是否有为工具栏本身设置的属性？

Answer 1

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

Answer 2

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

Sencha Touch：如何使Ext.Panel的工具栏适合内容？

2 个答案: