Toolbar: how to have one button on left side, the other on right? [ST2-PRE3]

[mgreer]

In Sencha Touch 1.1, this was easy to do by using a spacer


{
xtype: 'toolbar',
title: 'my toolbar',
items: [
{ ui: 'back', text: 'Back' },
{ xtype: 'spacer' },
{ ui: 'forward', text: 'Forward' }
]
}


In 1.1, it seemed like the toolbar's title did not get in the way of any of this, it "did the right thing".

The same configuration in Sencha Touch 2 (Pre3) does not work. In ST2, the title is just another item in the toolbar, so you end up with this:

30279



I realize ST2 is not done and this probably hasn't been addressed yet, but in the mean time anyone have a reliable hack to accomplish this? Simply doing

button, spacer, title, spacer, button

and then having all setTitle calls go to this added title does work. But only if I will always have two buttons. Sometimes I just want a button on the right.

[KJedi]

I use TitleBar for this.

Ext.define('CJ.view.nav.Topbar', {
extend: 'Ext.TitleBar',
requires: ['CJ.view.nav.button.Factory'],
alias: 'widget.topbar',
config: {
docked: 'top',
title: 'Your title'
},
/**
* Adds buttons to the Top panel. Called from the main controller when page is shown
* @param left Object Left button config.
* @param right Object Right button config
*/
addButtons:function(left, right) {
this.leftBox.removeAll();
this.rightBox.removeAll();
if (left === null && right === null) {
return;
}
if (left) {
this.leftBox.add(CJ.view.nav.button.Factory.create(left));
}
if (right) {
this.rightBox.add(CJ.view.nav.button.Factory.create(right));
}
}
});
I think you can have title set to empty string and achieve what you need.

[stefankendall]

I logged this issue about a week or two ago, and it was marked fixed for >PR3. We just need a release, I guess.

[jvwelzen]

I solved my problem like this



var toolBar = new Ext.Toolbar({
docked: 'top',
title: {
title: 'MyTtitle',
centered: true
},
items: [backBtn, {xtype: 'spacer'}, nextBtn]
});