Question

我们使用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' 
        }

}

问题是如何根据'Button'模型中的'color'成员设置背景颜色？

THX，

马腾

Answer 1

按钮小部件中没有颜色属性，因为按钮的颜色是一个合成效果，包括去饱和度，变暗，渐变......所以你不能只在一个地方改变颜色。

推荐选项将创建您自己的主题（从标准主题开始），然后为按钮创建不同的主题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文件的大小，删除您不需要的部分等。

Answer 2

尝试类似

的内容

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

然后在dataview中使用的组件中实现setButton函数。您还可以考虑在那里拥有一个功能，并完成所有工作。

Sencha Touch：动态按钮背景

2 个答案: