Sencha Touch：動態按鈕背景

我們使用DataView來顯示一系列按鈕。數據來自商店，其中的每個模型都包含按鈕的背景顏色。我可以更改按鈕的文本，但是如何根據模型中的值更改背景顏色？Sencha Touch：動態按鈕背景

這是ButtonData型號：

Ext.define('Sencha.model.ButtonData', { 
extend: 'Ext.data.Model', 

config: { 
    fields: [ 
     {name: 'text', type: 'auto'}, 
     {name: 'color', type: 'auto'} 
      ] 
     } 
});

基於這個例子http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2 我有這個配置一個DataItem的：

config : { 
     dataMap: { 
      getButton : { setText: 'text'}, // works! 

//problem is here: how do I set the background color based on the 'color' 
// member form the 'ButtonData' model? 
       }, 

    button: { 
     ui: 'plain' 
     }

}

所以問題是如何設置基於「顏色」成員的背景顏色形成「ButtonData」模型？

THX，

馬騰

來源

2012-06-19 Maarten

嘗試像

config : { 
    dataMap: { 
     getButton : { 
     setText: 'text', 
     setButton: {} 
     } 
    } 
}

然後實現在數據視圖中使用您的組件的SET按鈕功能。你也可以考慮在那裏有一個單一的功能，並完成所有的工作。

來源

2012-06-21 08:13:55

最後我們使用了一種類似的方法：我們從Button中派生一個類併爲其添加一個setColor函數來更改顏色。 Thx爲答案。 – Maarten

你沒有在按鈕控件顏色屬性，因爲按鈕的顏色，包括飽和度，darking，漸變......所以你不能簡單地改變的鎮靜作用只有一個地方的顏色。

建議選項將創建您自己的主題（從標準主題開始），然後爲按鈕創建不同的主題UI。這可以增加線條像這樣在你的主題：

// you can add as many as you want. 
@include sencha-button-ui('color1', #FF0000, 'glossy'); 
@include sencha-button-ui('color2', #00FF00, 'glossy');

見煎茶觸摸主題的主題/樣式表/煎茶觸摸/默認/小工具/文件_buttons.scss更多的選擇。

然後，您可以根據您的模型更改按鈕上的ui屬性。此鏈接可能會有所幫助，讓您自己的主題和運行：

http://www.sencha.com/blog/getting-sassy-with-css

工作的其他優點與自己的主題是更容易觸摸的CSS，你可以優化你的CSS文件的大小去除你不需要的部分，等

來源

2012-06-20 15:19:59 Israel

Sencha Touch：動態按鈕背景

回答

相關問題