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:

Screen shot 2011-12-23 at 2.38.01 PM.png



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]
	});