1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    5
    Vote Rating
    0
    mgreer is on a distinguished road

      0  

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

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


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

    Code:
    {
        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.

  2. #2
    Sencha User KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145
    Vote Rating
    1
    KJedi is on a distinguished road

      0  

    Default


    I use TitleBar for this.
    Code:
    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.

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    134
    Vote Rating
    1
    stefankendall is an unknown quantity at this point

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    52
    Vote Rating
    1
    jvwelzen is on a distinguished road

      0  

    Default


    I solved my problem like this

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