0

我们使用 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' 成员设置背景颜色？

谢谢，

马丁

4

2 回答 2

0

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

推荐的选项是创建您自己的主题（从标准主题开始），然后为按钮创建不同的主题 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 主题的主题/样式表/sencha-touch/default/widgets/_buttons.scss 文件中查看更多选项。

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

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

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

于 2012-06-20T15:19:59.730 回答
0

尝试类似的东西

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

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

于 2012-06-21T08:13:55.007 回答