customizing sencha touch toolbar

Question

I want to create a custom toolbar using sencha touch. Using Ext.Toolbar, i am able to create a decent screen titlebar. But my requirement is to place my company brand image logo in the center of the title bar not the simple text as provided by the code below.

{
   xtype : 'toolbar',
   docked: 'top',
   title: 'My Toolbar'
}

can anyone help me how to do this ?

Answer 1

Try this

{
    xtype: 'toolbar',
    docked: 'top',
    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'center'
    },
    items: [
        {
            xtype: 'image',
            width:218,
            height:44,
            src:'http://cdn.sstatic.net/careers/gethired/img/careers2-ad-header-so-crop.png'
        }
    ]
}

Answer 2

You can add the image in your toolbar by using the title attribute. Here is some modified code from one of my apps doing just this. Also, by defining a custom class you can assign a custom xtype and reuse the main toolbar... Either way the code should have what you are looking for:

Ext.define('myApp.view.Maintoolbar', {
    extend: 'Ext.Toolbar',
    xtype: 'maintoolbar',
    requires: [
        //any necessary requirements
    ],
    config: {
        docked: 'top',
        title: '<div style="text-align:center;"><img src="images/logoSmall.png" width="185" height="36" alt="Company Name"></div>',
        padding: '5 5 5 5',
        items: [{
            iconCls: 'arrow_down',
            iconMask: true,
            ui: 'normal',
            //left: true,
            text: 'Menu',
            action: 'openmenu'
        },{
            xtype: 'spacer'
        },{
            xtype: 'button',
            iconCls: 'arrow_down',
            iconMask: true,
            ui: 'normal',
            align: 'right',
            text: 'Logout',
            action: 'logout'
        }]
    },
    initialize: function() {
        this.callParent();
    }
});