煎茶觸摸工具欄排列

我有煎茶觸摸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(); 
       } 
      } 
     ] 
});

當它呈現，標題是高了一點：

the title is too damn high

但是如果我在我的CSS添加一個簡單的titleCls使其下降：

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

它把按鈕在不同的行標題！

title kicks buttons off the row

是什麼給了？我怎樣才能添加CSS，爲什麼它不在第一個地方？

來源

2012-03-04 SteveCav

我最後不得不將其轉換爲煎茶觸摸2，問題消失了。

來源

2012-05-09 22:30:11 SteveCav

這是更好地創建一個面板和麪板的對接項目添加工具欄一樣

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

來源

2012-03-05 06:12:32 Nag

這就是我已經在做。對不起，我應該也已經給出了面板的代碼，在它的dockeditems中有Techlink.views.requestsListToolbar。 – SteveCav 2012-03-05 22:29:40

您是否嘗試在touch-charts-full.css中更改它？ – Nag 2012-03-06 04:53:03

可以封裝稱號，一個div，然後加入填充頂到該分區，這是解決方案，我使用較早

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

或更好的，你可以創建一個CSS類像這樣使用它

.panel_title { 
    padding-top: 10px; 
} 

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

來源

2012-03-12 09:10:32

我剛剛試過你的代碼，標題正好在工具欄中間。

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？

來源

2012-03-12 17:42:16

煎茶觸摸工具欄排列

回答

相關問題