Выравнивание панели инструментов Sencha Touch

Question

У меня есть панель инструментов в Sencha Touch 1.1. Все довольно просто:

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();
                }   
            }
        ]
});

Когда он рендерится, заголовок будет немного высоким:

Однако, если я добавлю простой заголовок Cls в моем css, чтобы сломать его:

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

Он помещает кнопки в другой строке заголовка!

Что дает ?? Как я могу добавить CSS, и почему он не выровнен в первую очередь?

Answer 1

Мне пришлось преобразовать его в Sencha Touch 2, и проблема исчезла.

Answer 2

вы можете заключить заголовок в div и затем добавить padding-top к этому div, это было решением, которое я использовал ранее

title : '<div style="padding-top: 10px;">Service Requests</div>'

или лучше, вы можете создать CSSКласс, как это и использовать его

.panel_title {
   padding-top: 10px;
}

title : '<div class="panel_title">Service Requests</div>'

Answer 3

Я только что попробовал ваш код, и заголовок находится прямо посередине панели инструментов.

var tlb = new Ext.Toolbar({
    id: 'requestsListToolbar',
    title: 'Service Requests',
    items: [
        {xtype: 'spacer'},
        {
            xtype: 'button',
            width: 35,
            height: 25,
            cls: 'refreshbtn'  
        }
    ]
});

new Ext.Panel({
    dockedItems: [tlb],
    fullscreen: true,
});  

Вы уверены, что не связались с оригинальной панелью инструментов css?

Answer 4

Лучше создать одну панель и добавить панель инструментов в закрепленные элементы панели, например

 var Panel = new Ext.Panel( {
    layout: {
        type: 'fit',
        align: 'top'
    },
    defaults: {
        flex: 1,
        cls: 'card1',
        layout: 'fit'
    },
    dockedItems: {
        dock: 'top',
        xtype: 'toolbar',
        ui: 'light',
                   // change your custom css in touch-charts-full.css by searching for x-toolbar-light
        title: 'Service Requests',
        items: [
                    // items to be included in toolbar
                     ]
    },
    items: []
});