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：动态按钮背景

回答

相关问题