ExtJS如何通過使用按下的按鈕來設置按鈕css配置

我想在按下按鈕時更改顏色。我試圖使用pressed壓制配置，但它沒有奏效。如何解決這個問題，還是有另一種方法來設置按鈕時按下css？非常感謝！ExtJS如何通過使用按下的按鈕來設置按鈕css配置

的Javascript：

Ext.create('Ext.Button', { 
     text: 'Click me', 
     renderTo: Ext.getBody(), 
     cls: 'my-btn', 
     pressedCls: 'my-btn-pressed' 
});

CSS：

.my-btn { 
    background: Black 
} 

.my-btn-pressed { 
    background: Red; 
}

Fiddle Here

來源

2015-06-25 Raymond Yeh

哪個ExtJS的版本您使用的？ – Greendrake

嗨DrakeES，我的版本是5.0.1 –

~~我認爲這是一個錯誤，4 EXT你只可以加「X - 」 - 爲前綴的pressedCls。但是對於extjs 5，你必須在你的css屬性中使用！important指令。看看這個：~~

編輯感謝@Digigizmo 對於ExtJS的5，你需要使用正確的元素選擇。對於4版本和更早的版本，只需爲css屬性添加「x-」前綴。

.my-btn.x-btn.x-btn-pressed { 
    background: Red; 
}

Fiddle

對於ExtJS的4和早前

.x-my-btn-pressed { 
    background: Red; 
}

對於ExtJS的5（錯誤的方式，使用上述正確的選擇）

.x-btn-pressed.my-btn { 
    background: Red !important; 
}

來源

2015-06-25 08:14:35

沒有錯誤，這只是[CSS特異性]（https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity）的結果 - 有大量的文章詳細說明了這是如何計算和最佳實踐方法來管理它，但總之，你應該避免'！important' - 在大多數情況下，你可以使用一個更合格的選擇器規則來定位一個元素。在ExtJS5的情況下，例如['.my-btn.x-btn.x-btn-pressed]（https://fiddle.sencha.com/#fiddle/pef）。 – Emissary

@Digigizmo，哦，謝謝，我懷疑這是一個愚蠢的方式（！import using）並嘗試了很多選擇器，例如.my-btn-pressed.x-btn.x-btn-pressed（這種風格我看到開發工具按鈕按下） - 但他們沒有工作。寫這個，我會upvote你的答案。 –

謝謝伊戈爾和Digigizmo。這很有用！ –

ExtJS如何通過使用按下的按鈕來設置按鈕css配置

回答

相關問題