Mobile DBListGrid Custom Template Color Variable ?

[andyhill]

I am trying to have custom colors on custom template - please advise - thanks.

 

  config.itemTpl = new Ext.XTemplate

  (

 

    {

      '<table class="gridCustom">'+

        '<tr>'+

          '<td width="269px" style="color: var({[this.getColor(values)]}); text-align:left; height:80%">{[this.getStreet(values)]}</td>'+

          '<td width="60px"  style="text-align:left; height:80%">{[this.getNAH(values)]}</td>'+

        '</tr>'+

      '</table>',

 

    {

      getColor: function(values)

      {

        if(values[3] == 1) return 'blue';

        else               return 'black';

      }

    },

 

[andyhill]

Solved

[Tokay]

Please share solution, it could be usefull for others, thank you.

[andyhill]

color: {[this.getColor(values)]};

[Ario.Paxaz]

Hello

What am I doing wrong?
When I write the field number, it does not load.

Regards.

 

function beforeInit(sender, config)
{
  var htmlRow='<div class="dvContainer">'+
        '<table style="width:100%;height:100%;border-collapse: collapse;">'+
            '<tbody>'+
                '<tr style="border-bottom: 1px solid;">'+
                    '<td style="text-align: right;">'+
                        '<span>'+
                            {1}
                        '</span>'+
                        '<span>'+
                            'title'+
                        '</span>'+
                    '<td>'+
                '</tr>'+
                '<tr>'+
                    '<td  style="display: flex; justify-content: space-between; align-items: center; line-height: 2rem;">'+
                        '<span>'+
                            'title'+
                        '</span>'+
                        '<div style="height: 1px; width: 100%; ;background-color: #000; margin: 0 4px;"></div>'+
                        '<span>'+
                               'title'+
                        '</span>'+
                    '</td>'+
                '</tr>'+
                '<tr>'+
                    '<td  style="display: flex; justify-content: space-between; align-items: center; line-height: 2rem;">'+
                        '<span>'+
                            'title'+
                        '</span>'+
                        '<div style="height: 1px; width: 100%; ;background-color: #000; margin: 0 4px;"></div>'+

                        '<span>'+
                               'title'+
                        '</span>'+
                    '</td>'+
                '</tr>'+
                '<tr>'+
                    '<td  style="display: flex; justify-content: space-between; align-items: center; line-height: 2rem;">'+
                        '<span>'+
                            {4}
                        '</span>'+
                        '<div style="height: 1px; width: 100%; ;background-color: #000; margin: 0 4px;"></div>'+
                        '<span>'+
                               'title'+
                        '</span>'+
                    '</td>'+
                '</tr>'+
                '<tr style="border-top: 1px solid;">'+
                    '<td style="text-align: right;">'+
                        'title'+
                    '</td>'+
                '</tr>'+
            '</tbody>'+
        '</table>'+
    '</div>';
   config.itemTpl= new Ext.XTemplate(htmlRow);  
}

 

[Sherzod]

1 hour ago, Ario.Paxaz said:

function beforeInit(sender, config) 
{
  var htmlRow = '<div class="dvContainer">' +
    '<table style="width:100%;height:100%;border-collapse: collapse;">' +
      '<tbody>' +
        '<tr style="border-bottom: 1px solid;">' +
          '<td style="text-align: right;">' +
            '<span>' +
              '{1}' +
            '</span>' +
            '<span>' +
              'title' +
            '</span>' +
          '</td>' +
        '</tr>' +
        '<tr>' +
          '<td style="display: flex; justify-content: space-between; align-items: center; line-height: 2rem;">' +
            '<span>' +
              'title' +
            '</span>' +
            '<div style="height: 1px; width: 100%; background-color: #000; margin: 0 4px;"></div>' +
            '<span>' +
              'title' +
            '</span>' +
          '</td>' +
        '</tr>' +
        '<tr>' +
          '<td style="display: flex; justify-content: space-between; align-items: center; line-height: 2rem;">' +
            '<span>' +
              'title' +
            '</span>' +
            '<div style="height: 1px; width: 100%; background-color: #000; margin: 0 4px;"></div>' +
            '<span>' +
              'title' +
            '</span>' +
          '</td>' +
        '</tr>' +
        '<tr>' +
          '<td style="display: flex; justify-content: space-between; align-items: center; line-height: 2rem;">' +
            '<span>' +
              '{4}' +
            '</span>' +
            '<div style="height: 1px; width: 100%; background-color: #000; margin: 0 4px;"></div>' +
            '<span>' +
              'title' +
            '</span>' +
          '</td>' +
        '</tr>' +
        '<tr style="border-top: 1px solid;">' +
          '<td style="text-align: right;">' +
            'title' +
          '</td>' +
        '</tr>' +
      '</tbody>' +
    '</table>' +
  '</div>';
  config.itemTpl = new Ext.XTemplate(htmlRow);  
}