Creating a custom titlebar/toolbar

I am trying to create a custom titlebar or toolbar that looks like this:

2015-02-21_11-48-30.jpg

The background color and text on either side of the flower sprite must be able to change. Limitations I found with [xtype: titlebar]:

- Can't change base color at runtime.

- Can't set title to centered html (span.deck-name, span.sprite, span.edition-name)

So I resorted to just creating a panel like this:

Code:

            {
                id: 'menubar',
                docked: 'top',
                layout: {
                    type: 'vbox',
                    pack: 'center', // to center things vertically
                },
                items: [
                    {
                        id: 'menu-button',
                        xtype: 'button',
                        ui: 'plain'
                    },


                    {
                        id: 'title-bar',
                        layout: 'hbox',
                        centered: true,
                        items: [
                            {
                                id: 'deck-name',
                                xtype: 'label',
                                html: 'Wellness Deck'
                            },
                            {
                                id: 'status-bar-sprite',
                                cls: 'image',
                            },
                            {
                                id: 'edition-name',
                                xtype: 'label',
                                html: 'Wellness Edition',
                            }
                        ]
                    },
                    {
                        id: 'help-button',
                        xtype: 'button',
                        ui: 'plain',
                    }
                ]
            },

And this is basically working except the help button on the far right shows up right under the menu button on the far left (I hacked in a [position: absolute] for the screenshot).

I want to know if this is actually possible by customizing the built-in titlebar/toolbar xtypes, and if not then what is the best way to automatically position and v-center the help button the right just as the menu button is automatically positioned and v-centered on the left?

Thank you so much!

Creating a custom titlebar/toolbar