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

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

Однако если добавить простой titleCls в моем 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

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

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

Answer 3

вы можете инкапсулировать заголовок в DIV, а затем добавить обивка-топ для этого 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 4

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

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?