0

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?

Old McStopher
  • 6,295
  • 10
  • 60
  • 89

2 Answers2

1

Ext.Toolbar inherits directly form Ext.Container and because of this has layout options. If you give you toolbar a different layout like autocontainer or fit you should be able to get the title attribute to work while having your expanding toolbar.

Ballsacian1
  • 17,214
  • 2
  • 26
  • 25
0

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.

Old McStopher
  • 6,295
  • 10
  • 60
  • 89
  • I realize this, but if you are looking to use the title parameter you might as well just use a toolbar with a different layout config. Either way though as I said earlier a toolbar and container / panel are practically the same thing except for some default parameters being set for you like the layout: 'hbox'. – Ballsacian1 Jul 04 '11 at 15:47
  • Thanks, @Ballsacian. I shall give yours a go (and update the chosen answer, as necessary) when I return to that portion. Best. – Old McStopher Jul 04 '11 at 17:49