Sencha Touch 도구 모음 정렬

Question

나는 Sencha Touch 1.1에 도구 모음이 있습니다. 그것은 아주 간단 : 내 CSS에서 간단한 titleCls를 추가 아래로 가져 그러나

:

가 렌더링

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

은, 제목이 약간 높은

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

버튼과 다른 행에 버튼을 놓습니다!

무엇 제공

? CSS를 어떻게 추가 할 수 있습니까? 왜 처음부터 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

처럼 패널의 고정 항목에 도구 모음을 추가하는 것이 좋습니다,이 솔루션은 내가했다 이전

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를 사용하지 않았습니까?