Question

We’re using a DataView to display a series of buttons. The data comes from a store and each model in it contains the background color for a button. I can change the button’s text but how can I change the background color based on the value from the model?

This is the ButtonData model:

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

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

Based on this example http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2
I have a DataItem with this config:

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' 
        }

}

So the problem is how to set the background color based on the ‘color’ member form the ‘ButtonData’ model?

Thx,

Maarten

Answer 1

Try something like

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

Then implement the setButton function in your component used in the dataview. You can also want to consider to have a single function there and do all the job in that.