基於顏色選擇器

我有用戶在其中輸入一些數據到輸入表單，然後將煎茶ExtJS的應用ExtJS的動態地改變按鈕的背景顏色選擇與該項目相關聯的顏色。在他們單擊表單中的保存按鈕後，表單關閉併爲新項目創建一個按鈕。我基本上試圖弄清楚如何改變按鈕的背景顏色以對應用戶選擇的內容。我做了一堆搜索，發現大部分都是通過CSS並設置了cls屬性。如果我在css文件中爲顏色選擇器中的每種顏色創建了一條線，但是這樣會很好，但是當顏色不知道時，必須有一種方法來動態設置按鈕背景顏色。基於顏色選擇器

layoutRoot.down('#pnlTest').add({ xtype: 'button', text: obj.name, height: 25, width: 125, margin: '5', });

來源

2014-10-06 Josh

您是否嘗試removeCls，然後addCls方法爲按鈕定義，以便在需要時更改顏色？如果任何

嘗試removeCls方法來刪除現有的CSS，然後你想要的背景顏色設置爲不同的CSS類和使用addCls方法CSS類添加到按鈕。

來源

2014-10-07 00:53:10

嘗試，對我來說沒有工作。 – happyyangyuan 2015-08-27 07:23:31

這有點不合理有每種顏色的一類！您應該可以使用風格屬性手動設置樣式。只需用您的變量替換十六進制字符串。

{ 
    xtype: 'button', 
    text: obj.name, 
    height: 25, 
    width: 125, 
    margin: '5', 
    style: { 
     background: '#FF5566' 
    } 
}

相關的文檔（文檔是ExtJS的版本5.0，但因爲1.1.0的功能已經可用）http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Component-cfg-style

來源

2014-10-23 13:19:11

這個效果很好。我也可以動態地改變風格。 – happyyangyuan 2015-08-27 07:25:43

從顏色選擇器中創建RGB串（這裏語法可能變化取決於你的選擇器是如何返回的顏色）
var rgb = [picker.r, picker.g, picker.b];
var string = 'rgb(' + rgb.join(',') + ')'

使用其ID獲取按鈕

var button = Ext.getCmp('Your_button_ID');

更改按鈕顏色

button.getEl().dom.style.background = string;

來源

2014-11-18 13:48:14 Mouhcine

基於顏色選擇器

回答

相關問題