Real Ribbon ButtonGroup

[curlybracket]

I love the new ButtonGroup from ExtJS 3.0 RCs. But i more likely prefer to have the title at the bottom, like in the Ribbon Control of MS Office. So i looked around and came up with some CSS to style the ButtonGroup just like the real Ribbon one with a title at the bottom and want to share this with the world ^^

Just add the following css to your project.

.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-bc {
    /* Set this path to your environment! */
    background-image:    url(assets/images/group-bt.gif);
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .xtb-text {
    color:                #3E6AAA;
    padding:            0;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer,
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns,
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns td.x-toolbar-cell {
    padding:            0;
}

.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns-right .x-panel-fbar {
    float:                none;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns .x-toolbar-left table {
    margin:                0 auto;
}

/* FIXES FOR IE: */
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns.x-panel-btns-right .x-clear {
    font:                0 sans-serif;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns .x-toolbar-left {
    text-align:            center;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-tc {
    vertical-align:        top;
}

and add the image from the attachment.

Now create a ButtonGroup with the cls-configuration 'x-btn-group-ribbonstyle'. Then drop the title configuration and use fbar instead. The result is something like:

new Ext.ButtonGroup({
    cls:        'x-btn-group-ribbonstyle',
    fbar:        ['YourTitleHere']
});

And you get something like this:


Hope its also working for you

[koko2589]

good work can we see demo?

[curlybracket]

good work can we see demo?

It's no rocket science, but sure, here it is: http://js.curlybracket.de/examples/b.../toolbars.html

[wez.morris]

Donno if you have the same problem but there is an issue with IE7 and these.

There's a 1px gap over the top and the bottom text goes a bit wrong. Have you made any fixes to this since the original post?

[curlybracket]

Donno if you have the same problem but there is an issue with IE7 and these.

There's a 1px gap over the top and the bottom text goes a bit wrong. Have you made any fixes to this since the original post?

You're fully right, i must confess i made no tests in IE yet. I improved the css and added fixed for the IE. For me it's looking correctly now in IE 8 and IE 8 compat mode. Changes are in the first post and also on the examples page.
Thanks for reporting the bug and have fun with the ribbon

[Scorpie]

Nice work, works like a charm

Is it possible to give the bar a fixed height / horizontal spacer, so that we get more space between the fbar and the buttons?

[curlybracket]

Hm, can you give a simple image what a look you like? I don't understand your question fully.

[Scorpie]

Hm, can you give a simple image what a look you like? I don't understand your question fully.

Never mind, fixed it already

I`m having trouble using this css with other themes then the blue one. How can I change the bottom blue bar, containing the text?

[curlybracket]

I just saw that i missed the group-bt.gif image used in the stylesheet. See the attachment for this image. This is the only background color used for this hack, so changing the image should answer your question.

[Scorpie]

Just a heads up; it seems that this hack breaks with 3.1