CODEWITHSUNDEEP
sencha-touchext-panel
Old McStopher
Old McStopher

Reputation: 6349

Sencha Touch: How to fit an Ext.Panel's toolbar to content?

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?

Upvotes: 0

Views: 1393

Answers (2)

Ballsacian1
Ballsacian1

Reputation: 17322

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.

Upvotes: 1

Old McStopher
Old McStopher

Reputation: 6349

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.

Upvotes: 0

Related Questions