Question

I have an Ext.Panel with a 'toolbar' that will hold a variable amount of content in a <div> that I want to ensure is large enough to contain all content. Is there a way to dynamically size the toolbar to fit its content?

When I add, say, multiple lines to the <div>, they are cut off. The layout: 'fit' property keeps it contained relative to the parent container, but how do I expand it to contain all child content?

The toolbar is defined in a panel as follows (it is then added to a 'card' Panel layout).

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

I’m using SASS/SCSS. Is there a recommended way to do so with such? Or is there some property to set for the toolbar itself?

Answer 1

So, the answer as of right now is to simply remove the xtype: 'toolbar'. The title does not show, but this is not an issue, as the <div> will have all needed content (including a title, if need be). Because the content is still in dockedItems, it still docks to the top and does not scroll like the this.list content. So, one can debate if this is technically fitting a “toolbar”, but the end result of dynamically fitting the top content is achieved.