CODEWITHSUNDEEP
sencha-touchsencha-touch-2
jaffa
jaffa

Reputation: 27350

How do I left align title text in title bar using Sencha Touch

Can anyone show how I can set the alignment of the title in a title bar to left justified. I'm currently trying this but it isn't working:

var p = Ext.create('Ext.Panel', {
    items: [
    {
        xtype: 'toolbar',
        docked: 'top',
        title: 'my title',
        style: {
            'text-align':'left'
        }
    }   
    ]
}); 
Ext.Viewport.add(p);

2nd attempt: Not now able to have the title left and the toolbar button right!

var p = Ext.create('Ext.Panel', {
    items: [
    {
        xtype: 'toolbar',
        docked: 'top',
        layout: {
            pack: 'end'
        },
        title: {
            title: 'mytitle',
            style: {
                'text-align':'left'
            }
        },
        items: [
            {
                xtype: 'button',
                text: 'mybutton',
                align: 'right'
            }
        ]
    }   
    ]
}); 
Ext.Viewport.add(p);

Upvotes: 1

Views: 5257

Answers (3)

CruorVult
CruorVult

Reputation: 823

You are trying to add style to the toolbar but not to the title element. Do this:

xtype: 'toolbar',
docked: 'top',
title: {
    title: 'my title',
    style: {
        'text-align':'left'
    }
}

Look this http://jsfiddle.net/xv67e/

Upvotes: 2

Rachel Gallen
Rachel Gallen

Reputation: 28563

You can give items of a Ext.TitleBar an align configuration of left or right which will dock them to the left or right of the bar.

Upvotes: 0

Tikkes
Tikkes

Reputation: 4689

I believe it is just align and not text-align, put it outside of the style block, right under title.

More info on this page

Upvotes: 0

Related Questions