Auto width and bottom toolbar

[Shadin_a]

I am working on Extjs 4 app consists of container contains many panels with different layouts and one bottom toolbar (dock: bottom).

In order to tailor container design to various screen sizes, I am supposed to set container width to auto. but when I do that, the toolbar becomes almost Hidden!!
it shows when i set it to top but disappears when reset it to bottom.

What am I missing here ?

[scottmartin]

Please show your code of your setup ...

example that should work:

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',

    height: 200,
    width: 400,
    title: 'My Panel',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top'
                }
            ]
        });

        me.callParent(arguments);
    }

});

Scott.

[dongryphon]

Just a thought (but, yes, a code example is essential for correct answers)...

Docked items do not participate in shrink-wrapping which is, I believe,the form of auto-sizing you are wanting.

If you want a bottom toolbar that does participate in the shrink-wrap width of a panel you might need something like this:

Ext.require('*');

Ext.onReady(function() {
    new Ext.Panel({
        shrinkWrap: true,
        layout: 'vbox',
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'component',
            html: 'Hello',
            flex: 1
        },{
            xtype: 'toolbar',
            items: [
                { xtype: 'button', text: 'Button 1' },
                { xtype: 'button', text: 'Button 2' }
            ]
        }]
    });
}); 

Depending on the container such a panel is placed in, the shrinkWrap flag may not be needed (e.g., in some layouts like an absolute, box or border layout, child items are shrinkWrap in all cases).