ExtJS - 如何自定義按鈕？

我需要創建一些自定義的按鈕 - 就像一個紅色按鈕與白色的文字，綠色按鈕白色文本等ExtJS - 如何自定義按鈕？

我遵循了同樣的問題：「How to change background of hovered and pressed extjs-button dynamically」的接受的答案，但我沒有工作。它只是改變了用戶界面，沒有任何交互。當我點擊自定義按鈕時，儘管處理函數被執行，它仍然會切換。

ExtJS按鈕根據文檔有兩種造型配置：overCls和pressedCls。儘管我將它們設置爲pressedCls配置對我來說都不起作用。

爲了創建我自己的按鈕，應該重寫/定義哪些css屬性？

煎茶小提琴鏈接：https://fiddle.sencha.com/#fiddle/fim

來源

2014-12-25 talha06

簡單地說，任何形式的組件有一個名爲「CLS」屬性。所以，你可以使用以下命令：

cls: 'myclass'

編輯了最後一個問題：

你必須覆蓋X-BTN-重點班，刪除/替換藍色背景色：

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

編輯您的提琴的CSS的：使用這些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; 
}

來源

2014-12-26 01:35:13 Tyr

感謝;但這只是改變了按鈕的靜態UI;我需要改變'over'和'pressed'的用法。我在帖子中添加了sencha小提琴鏈接;你可以看到我的意思。 – talha06

它似乎在你的小提琴中工作。按鈕是綠色的，在懸停它是淺綠色，在mousedown它是藍色的... – Tyr

不，它不是;當按鈕被點擊時，按鈕顏色變成深藍色。它切換;點擊事件後不會轉爲原始顏色。當你點擊按鈕外的某個地方時，它會變成綠色的原始顏色。它應該是這樣的：A **綠色**按鈕;在它上面應該變成**淺綠色**，當它被點擊時它應該是**深綠色**。謝謝你的照顧。 – talha06

嘗試：

.x-btn-over.green-button

和

.x-btn-pressed.green-button

我不知道這是否是最好的定義與使用自定義用戶界面，但它是一個快速解決方案。

希望它可以幫助

佩德羅

編輯（添加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; 
}

添加了一些隨機的屬性，你可能需要的背景圖像等

來源

2014-12-26 12:14:05

不幸的是沒有爲我工作。你有機會看看我爲它創建的小提琴：https://fiddle.sencha.com/#fiddle/fim – talha06

我相信問題是在CSS本身，有時，正確覆蓋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; 邊框：實心1px紅！重要; } ---無法真正格式化評論，將嘗試將這些添加到我的答案，在你的小提琴上測試，他們似乎工作。 –

感謝您的關心;除了新聞，一切都是完美的。點擊按鈕後，背景變成藍色。 – talha06

ExtJS - 如何自定義按鈕？

回答

相關問題