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

Question

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

CruorVult · Accepted Answer · 2013-01-17T15:08:36.103

2

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/

edited Jan 17 '13 at 15:08

answered Jan 17 '13 at 13:52

CruorVult

823
1
9
17

shouldn't the `text-align` style on the toolbox place the title left if it were so? – Tikkes Jan 17 '13 at 13:57
@Tikkes: Why it shuld do it? text-align works with inline element but not the block – CruorVult Jan 17 '13 at 14:03
@Tikkes: Please see my 2nd edit above. I'm now not able to align the button in the other direction... – jaffa Jan 17 '13 at 14:10
@Tikkes: I don't think that this is the problem. It depends on what result you want to get. – CruorVult Jan 17 '13 at 14:36
I'm kind of oblivious as to why your answer isn't working. It should be the right way to do it. – Tikkes Jan 17 '13 at 14:42
That's what I was after. I had to add a slight margin to the button which I don't normally have to do. Any reason why this is? – jaffa Jan 18 '13 at 09:06

score 0 · Answer 2 · answered Jan 17 '13 at 13:26

0

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

answered Jan 17 '13 at 13:26

Tikkes

4,599
4
36
62

Thanks, but that doesn't seem to work. I have one button packed to the end (right). But on an iPhone the central title bleeds into the button. Hence the reason for wanting the title to be left justified. Any other ideas? – jaffa Jan 17 '13 at 13:34
hmm uhm you could also try the `layout` block. Like this: layout: { pack: 'justify', align: 'left' } – Tikkes Jan 17 '13 at 13:45
@Tikkes: You can't change layout of tollbar, because it has docked top. It means that all inner items will be paste to the body and fill all horizontal space.(-webkit-box-flex: 1) – CruorVult Jan 17 '13 at 14:29

score 0 · Answer 3 · answered Jan 17 '13 at 13:28

0

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.

answered Jan 17 '13 at 13:28

Rachel Gallen

27,943
21
72
81

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

3 Answers3