ExtJS - 如何自定義按鈕？

Question

我需要創建一些自定義按鈕 - 例如帶有白色文本的紅色按鈕，帶有白色文本的綠色按鈕等。

我按照同樣問題的接受答案“ 如何動態改變懸停和按下extjs按鈕的背景 ”，但對我來說不起作用。 它只是在沒有任何交互的情況下改變了ui。 當我單擊自定義按鈕時，盡管執行了處理程序功能，它仍會切換。

ExtJS按鈕有2個樣式配置，根據文檔： overCls和pressedCls 。 盡管我設置了他們兩個pressedCls配置對我來說不起作用。

我應該覆蓋/定義哪些css屬性才能創建自己的按鈕？

Sencha Fiddle Link： https ： //fiddle.sencha.com/#fiddle/fim

Answer 1

簡單地說，每個表單組件都有一個名為“cls”的屬性。 所以你可以使用以下內容：

cls: 'myclass'

編輯上一期：

您必須覆蓋x-btn-focus類，以刪除/替換藍色背景顏色：

.x-btn-focus.green-button { 
  background:#46a546;
}

編輯你的小提琴的CSS：

.green-button{
    background:#46a546;
    border: none;!important;
    color: #ffffff;!important;
}

.green-button .x-btn-inner {
    color: #ffffff;
}


.green-button-over {
    background: #4cc54c;
    border: none;
}


.x-btn-over.green-button {
    background: #4cc54c;
    border-color: #4cc54c;
}

.x-btn-pressed.green-button {
    background: #5b9f5b;
    border-color: #5b9f5b;
}
.x-btn-focus.green-button { 
  background:#46a546;
}

Answer 2

嘗試使用這些css類：

.x-btn-over.green-button

和

.x-btn-pressed.green-button

我不知道這是否比定義和使用自定義UI更好，但它是一個快速解決方案。

希望能幫助到你

佩德羅

編輯（在下面的評論中添加css）

.x-btn-over.green-button {
    background: #4cc54c;
    background-color: red !important;
    background-image: none;
}
.x-btn-pressed.green-button {
    background: yellow;
    background-color:yellow !important;
    border:solid 1px red !important;
}

添加了一些隨機屬性，您可能需要background-image等

Answer 3

以下CSS適用於我：

.numpad-btn {
    background: #008080 !important;
}

.numpad-btn .x-btn-inner {
    color: #ffffff;
}

.x-btn-over.numpad-btn {
    background: #00baba;
    border: solid 1px #00baba !important;
    background-color: #00baba !important;
    background-image: none;
}

.x-btn-pressed.numpad-btn {
    background: #005151;
    background-color: #005151 !important;
    border: solid 1px #005151 !important;
    background-image: none !important;
}

.x-btn-focus.numpad-btn {
    background: #008080;
}