extJs toolbar that take only nessassary size

I want toolbar to take only nessasary \ auto size.. how can i do that?

MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'fit',
initComponent: function() {
    this.items = [
        {
            xtype: 'panel',
            title: 'My Panel',
            layout: 'vbox',
            tbar: {
                xtype: 'toolbar',
                items: [
                    {
                        xtype: 'button',
                        text: 'MyButton 1'
                    },
                    {
                        xtype: 'button',
                        text: 'MyButton 2'
                  开发者_如何学运维  }
                ]
            }
        }
    ];
    MyViewportUi.superclass.initComponent.call(this);
}
});

Because a toolbar is just that, a bar, it will expand to fill all available space. Buttons placed inside a toolbar will occupy as much space as they need, but the toolbar will still expand to fill the maximum width possible.

The Ext.Toolbar has a property called autoWidth, but this will only cause the toolbar to use the css width: auto property. This is not perfect, but it's probably your best bet.