ExtJS 4：防止自动计算宽度

Question

I'm using Ext.tab.Bar inside grid panel's tbar .

My code is:

...
tbar: [
    ...
    "->",
    this._getTabbar()
]
// where this._getTabbar() is:
GridPanel.prototype._getTabbar = function() {
    return Ext.tab.Bar({
        width: 850,
        items: [
            {text: "Grid's Tab #1", closable: false},
            {text: "Grid's Tab #2", closable: false},
            {text: "Grid's Tab #3", closable: false},
            ...
            {text: "Grid's Tab #N", closable: false}
        ]
    });
}

As a result, I get correct top-toolbar, but buttons in the tabbar is too short and I can't see their labels. It means that tab-button Grid's Tab #1 appears like Grid's T...

I've tried to manually add width parameter to the tab configuration:

{text: "Grid's Tab #N", ..., width: 150}

And nothing, ExtJS automaticaly calculates the same width for each button. I tried to set flex: false and again nothing.

What I want to ask you is what should I do to prevent flex-like width calculating? If I create 100500 buttons with "The button with long-long-long-long label", I want to see full text in all buttons in the tabbar.

Thanks for your help.

Answer 1

I am a little confused. Grid panel tbar config is meant for a toolbar. The config for a tbar is typically:

tbar: [
  { xtype: 'button', text: 'Button 1' }
]

Toolbar is not limited to buttons. Here is an example of a very busy toolbar with all kinds of fields http://jsfiddle.net/dbrin/PhAbR/embedded/result/

The tab bar on the other hand is for a tab panel. here is what the docs say:

"TabBar is used internally by a TabPanel and typically should not need to be created manually"

not that you couldn't :) So, are you trying to create a custom component with tabs? If so why not use the regular tab panel?