Sencha Touch：动态按钮背景答案

【问题标题】：Sencha Touch: dynamic button backgroundSencha Touch：动态按钮背景
【发布时间】：2012-06-19 12:54:23
【问题描述】：

我们使用 DataView 来显示一系列按钮。数据来自商店，其中的每个模型都包含按钮的背景颜色。我可以更改按钮的文本，但如何根据模型中的值更改背景颜色？

这是 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'模型中的'color'成员设置背景颜色？

谢谢，

马丁

【问题讨论】：

标签： button touch extjs dataview

【解决方案1】：

试试类似的东西

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

然后在数据视图中使用的组件中实现 setButton 函数。您还可以考虑在其中创建一个函数并完成所有工作。

【讨论】：

最终我们使用了类似的方法：我们从 Button 派生了一个类，并为其添加了一个 setColor 函数来更改颜色。谢谢你的答案。

【解决方案2】：

您在按钮小部件中没有颜色属性，因为按钮的颜色是一种组合效果，包括去饱和、变暗、渐变……所以您不能只在一个地方简单地更改颜色。

推荐的选项是创建您自己的主题（从标准主题开始），然后为按钮创建不同的主题 UI。这可以通过在您的主题中添加这样的行来完成：

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

在 sencha-touch 主题的themes/stylesheets/sencha-touch/default/widgets/_buttons.scss 文件中查看更多选项。

然后您可以根据您的模型更改按钮上的 ui 属性。此链接可能有助于启动和运行您自己的主题：

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

使用自己的主题的其他优点是更容易触摸 css，您可以优化 css 文件的大小，删除不需要的部分等。

【讨论】：