How do I alter metaData on number, date and boolean columns in ExtJS 6.x using Sencha Architect?

Question

Per Sencha documentation, numbercolumn, datecolumn and booleancolumn does not have a renderer event. As logical as this sounds there is an inherent issue with not having a renderer event on these column types.

Example of a renderer function in a view controller to modify the background color when the LineNum of the record is in the array of warning line numbers.

renderCompanyID: function(value, metaData, record, rowIndex, colIndex, store, view) {
    if (record.get('LineNum') > 0) {
        this.warningLineArr.forEach( function (item, index){
            if (item['LineNum'] == record.get('LineNum')) {
                metaData.style = "background-color: rgba(255, 184, 77, 0.25);";
                view.addRowCls(rowIndex, 'rec-warn');
            }
        });
    }
},

And the renderer in a gridcolumn definition is as follows

xtype: 'gridcolumn',
   renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
      Ext.fireEvent('renderCompanyID', value, metaData, record, rowIndex, colIndex, store, view);
      return value;
  },
dataIndex: 'CompanyID',
text: 'Company ID'

And the results of this due to not having a renderer option on number and date columns is as follows:

So the question is, is there an event, listener or attribute on number, date or boolean columns that would send the metaData to the handler whereby the metaData can be altered on conditions and a per row/cell basis?

Answer 1

Your question may be an XY question, so let me answer your underlying problem first.

If it's just line numbers, you wouldn't use the meta parameter of the renderer function.

Since your color is fixed, it's even more easy to use the getRowClass method like this:

xtype: 'grid',
viewConfig: {
    getRowClass: function(record, rowIndex, rowParams, store){
        if (!record.get('LineNum')) return "";
        if(!Ext.isArray(this.ownerGrid.warningLineArr)) return "";
        if(this.ownerGrid.warningLineArr.indexOf(record.get('LineNum'))>-1) return "warning-row";
        return "";
    }
}

and then you would define a CSS class with the color:

.warning-row td {
    background-color: rgba(255, 184, 77, 0.25);
}

Relevant fiddle which also contains an answer to your question in the first place. Just in case you need it elsewhere on a single cell, it has the following override which updates meta info of a cell while using the default renderer:

Ext.define('MyOverride', {
    override: 'Ext.grid.column.Column',
   initComponent: function() {
       var me = this;
       if(me.defaultRenderer) {
           var oldRenderer = me.defaultRenderer
           me.defaultRenderer = function() {
               if(this.updateMeta) this.updateMeta.apply(this, arguments);
               return oldRenderer.apply(this, arguments);
           };
       }
       return me.callParent(arguments);
   } 
});

Answer 2

I think that if you manually set usingDefaultRenderer to true, you would be able to use the renderer and call the defaultRenderer to render the value.

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2ftg

Ext.define(null, {
    override: 'Ext.grid.column.Number',
    usingDefaultRenderer: true
});

Ext.create('Ext.data.Store', {
    storeId: 'employeeStore',
    fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
    data: [{
        firstname: "Michael",
        lastname: "Scott",
        seniority: 7,
        dep: "Management",
        hired: "01/10/2004"
    }, {
        firstname: "Dwight",
        lastname: "Schrute",
        seniority: 2,
        dep: "Sales",
        hired: "04/01/2004"
    }, {
        firstname: "Jim",
        lastname: "Halpert",
        seniority: 3,
        dep: "Sales",
        hired: "02/22/2006"
    }, {
        firstname: "Kevin",
        lastname: "Malone",
        seniority: 4,
        dep: "Accounting",
        hired: "06/10/2007"
    }, {
        firstname: "Angela",
        lastname: "Martin",
        seniority: 5,
        dep: "Accounting",
        hired: "10/21/2008"
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Column Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [{
        text: 'First Name',
        dataIndex: 'firstname'
    }, {
        xtype: 'numbercolumn',
        text: 'Seniority',
        dataIndex: 'seniority',
        renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
            return this.defaultRenderer(value);
        }
    }, {
        text: 'Hired Month',
        dataIndex: 'hired',
        xtype: 'datecolumn',
        format: 'M'
    }, {
        text: 'Department (Yrs)',
        xtype: 'templatecolumn',
        tpl: '{dep} ({seniority})'
    }],
    width: 400,
    forceFit: true,
    renderTo: Ext.getBody()
});