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

23 Dec 2011, 1:40 PM
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:


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.

24 Dec 2011, 12:44 AM
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) {
if (left === null && right === null) {
if (left) {
if (right) {
I think you can have title set to empty string and achieve what you need.

24 Dec 2011, 11:35 AM
I logged this issue about a week or two ago, and it was marked fixed for >PR3. We just need a release, I guess.

27 Dec 2011, 8:02 AM
I solved my problem like this

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