Mapping 2 fields of a Record to a single setter in a DataItem

[crojas]

Hello all,

I am trying to concatenate two fields of a record separated by a space to a single setter in of my dataitem. More specifically specifically, I am trying to set the label of a check box to the concatenation of the 'Name' field and the time portion of the 'Date' field of a record. Here is some code.

Ext.define('mobile.view.Item', 
{
    extend: 'Ext.dataview.component.DataItem',
    xtype: 'item',


    config: 
    {        
        isCompleted:
        {
            labelWidth:'90%',
        },
        {           
            getCompleted: 
            {
                setLabel: 'Name' + ' ' +Ext.Date.format('Date',"g:i a"),   <--- AREA OF INTEREST
                setChecked: 'Completed'
            }
        },
        layout: 
        {
            type: 'hbox',
            align: 'center'
        },
    },
    applyCompleted: function(config) 
    {
        return Ext.factory(config, Ext.field.Checkbox, this.getCompleted());
    },


    updateCompleted: function(newCompleted, oldCompleted) 
    {
        if (oldCompleted) 
        {
            this.remove(oldCompleted);
        }


        if (newCompleted) 
        {
            this.add(newCompleted);
        }
    }
});

In a perfect world, the line.....
setLabel: 'Name' + ' ' +Ext.Date.format('Date',"g:i a")
Would set the label of a check box to the name and time portion of a record. For example,
if a record had a field 'Name' with the value "John" and the field 'Date' with "1/10/2007 03:05:01 PM GMT-0600", then the label of this check box would display

"LABEL" "CHECK"
[John 3:05 pm | X ]

How would I go about getting the desired output?

[Kikketer]

I'm looking to do a similar thing. Right now I have a component that my dataitem refers to:

    // Use the dataMap to properly set the content
    dataMap : {
      getSplaem : {
        setIcon : 'image',
        setName :  'name',
        setIosTotalDownloads : 'iOSTotalDownloads',
        setAndroidTotalDownloads : 'AndroidTotalDownloads',
        setIosRetention : 'iOSSticky',
        setAndroidRetention : 'AndroidSticky',
        setTotalDownloads : 'TotalDownloads',
        setGeneralInfo : {name:'name', icon:'image'},
        setChart : 'name'
      }
    },


    splaem : {
      xtype : "splaem"
    }

Notice the setGeneralInfo call. All of these set functions set one item in my component, but I would rather set it all at once.
I've actually had to create a temporary map inside the component that each setter would modify.

splaem:

  config : {
    name : null,
    layout : "hbox",
    items : [
      {
        xtype : "container",
        layout : "vbox",
        align : "center",
        pack : "center",
        items : [
          {
            xtype : "image",
            itemId : "icon",
            cls : "icon",
            html : "<img src='./resources/images/ButtonMask.png'/>",
            height : 175
          },
          {
            xtype : "container",
            itemId : "details",
            cls : "appDetails",
            tpl : [
              "<table><tr><td>",
              "<table width='100%'><tr><th colspan='2'>Total Downloads</th></tr>",
              "<tr><td>iOS</td><td class='total'>{iOSTotalDownloads}</td></tr>",
              "<tr><td>Android</td><td class='total'>{AndroidTotalDownloads}</td></tr>",
              "<tr><td>Total</td><td class='total'>{TotalDownloads}</td></tr>",
              "</table>",
              "<table width='100%'><tr><th colspan='2'>Retention</th></tr>",
              "<tr><td>iOS</td><td class='total'>{iOSSticky}</td></tr>",
              "<tr><td>Android</td><td class='total'>{AndroidSticky}</td></tr>",
              "</table>",
              "</td></tr></table>"
            ]
          }
        ]
      },

Notice here that my template has several (almost all) of the bits of data I need and am getting from the dataitem.
Here's what the scary portion that I'm not proud of:

  setIosTotalDownloads : function (iOSTotalDownloads) {
    var thisItem = Ext.ComponentQuery.query('splaem');
    thisItem = thisItem[thisItem.length - 1].down("#details");
    this.tempData.iOSTotalDownloads = iOSTotalDownloads;
    thisItem.setData(this.tempData);
  },


  setAndroidTotalDownloads : function (AndroidTotalDownloads) {
    var thisItem = Ext.ComponentQuery.query('splaem');
    thisItem = thisItem[thisItem.length - 1].down("#details");
    this.tempData.AndroidTotalDownloads = AndroidTotalDownloads;
    thisItem.setData(this.tempData);
  },


  setIosRetention : function (iOSRetention) {
    var thisItem = Ext.ComponentQuery.query('splaem');
    thisItem = thisItem[thisItem.length - 1].down("#details");
    this.tempData.iOSSticky = iOSRetention;
    thisItem.setData(this.tempData);
  },

So what's happening here. Every time I run the set function, it has to find which item I'm currently in. The "thisItem.length - 1" gets the most current row. It then needs to find the #details component and set it's data. But the data gets wiped out each time, so I needed to set up a "tempData" map that each setter adds to. Then at the end of EACH SETTER the setData function is called.

Man it stings just typing this out. How does one set the data for this type of situation?

This is actually broken for me now since I need to now set the data for a chart that's within each of these data rows. Charts do not like using componentQueries, in fact I'm stuck until I can find the correct way to do this.