Question

I have a toolbar in Sencha Touch 1.1. It’s pretty simple:

Techlink.views.requestsListToolbar = new Ext.Toolbar({
    id: 'requestsListToolbar',
    title: 'Service Requests',
    //titleCls: 'TopLevelToolbar',
    items: [
            {xtype: 'spacer'},
            {
                xtype: 'button',
                width: 35,
                height: 25,
                cls: 'refreshbtn',
                handler: function () 
                {
                    RequestJobStore.load();
                }   
            }
        ]
});

When it renders, the title is a little high:

However if I add a simple titleCls in my css to bring it down:

.TopLevelToolbar 
{
    font-size:0.9em;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    color:#ffffff;  
    margin-top:0.8em;
}

It puts buttons on a different row to the title!

What gives?? How can I add the CSS, and why is it not aligned in the first place?

Answer 1

I ended up having to convert it to Sencha Touch 2, and the problem vanished.