ExtJS的按鈕

Question

嘿，我有一個小問題，真的，但東西我似乎無法找到答案。

當我在ExtJS的工具欄放置一個按鈕，它會出現一個默認外觀（像任何窗口工具欄選項）

我如何使它看起來像一個形式的按鈕？

Answer 1

看到這個職位上的煎茶論壇Toolbar Button Style.我也發現了一個按鈕，文本很直觀，爲用戶的這個造型。只需將幾行CSS添加到您的ExtJs css主文件中，您就可以爲您的應用程序全局更改此外觀。

Answer 2

這是相當接近的：ExtJS Button Style Toolbar

我一直在尋找這個問題找到答案：

添加

ctCls: 'x-btn-over' 

到該按鈕的配置使得它實際上看起來像一個按鈕。這是一種黑客攻擊，因爲它實質上是將工具欄按鈕設計爲看起來像是在懸停，但在我的情況下，我認爲這已經夠好了。

編輯：我沒碰過ExtJS的，因爲3版本，所以它看起來像這樣不再有效。

Answer 3

嘗試這樣的：

tbar: [ 
    { xtype: 'button', text: 'Button 1', cls:'x-btn-default-small' } 
] 

Answer 4

這裏是我的解決方案（它爲ExtJS的3.3.3）：

對於按鈕添加額外的類，我把它命名爲「X-工具欄，grey- BTN「：

xtype: 'button', 
id: 'processButton', 
text: 'Process', 
ctCls: 'x-toolbar-grey-btn' 

樣式額外的類，在不同的CSS文件：

.x-toolbar-grey-btn .x-btn-tl{ 
    background-position: 0 0; 
} 
.x-toolbar-grey-btn .x-btn-tr{ 
    background-position: -3px 0; 
} 
.x-toolbar-grey-btn .x-btn-tc{ 
    background-position: 0 -6px; 
} 
.x-toolbar-grey-btn .x-btn-ml{ 
    background-position: 0 -24px; 
} 
.x-toolbar-grey-btn .x-btn-mr{ 
    background-position: -3px -24px; 
} 
.x-toolbar-grey-btn .x-btn-mc{ 
    background-position: 0 -1096px; 
} 
.x-toolbar-grey-btn .x-btn-bl{ 
    background-position: 0 -3px; 
} 
.x-toolbar-grey-btn .x-btn-br{ 
    background-position: -3px -3px; 
} 
.x-toolbar-grey-btn .x-btn-bc{ 
    background-position: 0 -15px; 
} 
.x-toolbar-grey-btn button{ 
    font-weight: bold; 
} 

由於Ext按鈕圖像位於文件'/ext-3.3.3/resources/images/default/button/btn.gif'，我只更改了背景位置屬性。它看起來像原生按鈕。

Answer 5

你必須包裝在一個面板上，這裏是ExtJS的4.2.5

{ 
    xtype: 'panel', 
    items: { 
     xtype: 'button', 
     text : 'My button' 
    } 
}