getrowclass inside initcomponent does not work

Question

I have code like below

initComponent: function()
    {       
        var me = this;
        this.callParent(arguments);

        var rowAlerterCond = this.rowAlerter;
        if(rowAlerterCond !== undefined && rowAlerterCond !==null && typeof rowAlerterCond ==='object')
        {
            var returnVar = this.buildCondition(rowAlerterCond);
            this.rowHighlightConfig = returnVar;
           me.viewConfig.getRowClass = function(record, rowIndex, rowParams, store) {      
            if(this.rowHighlightConfig)
               return eval(this.rowHighlightConfig) ? 'orangeHighlight' : '';
         };
        }
    },

here getRowClass never gets invoked. Should i change anything? If i add getRowClass inside of viewConfig it works, but i need to traverse up the tree to get the rowHighlightConfig variable. Any solution for this?

Answer 1

The viewConfig is used to, well, configure the View class used by the grid panel. This View is instantiated and configured in the parent initComponent - the one you invoke at line 4.

After that, it's too late to modify the viewConfig, as the view is made. So you need to set up the viewConfig before invoking callParent.

How do you do that? Well, the beautiful thing about the getRowClass property is that it takes a function - or a closure. So something like this:

initComponent: function() {       
  var me = this; // important to grab this; the getRowClass will run in a different scope

  this.viewConfig = this.viewConfig || {}
  this.viewConfig.getRowClass = function() {
    if (!Ext.isDefined(me.rowHighlightConfig) {
      var rowAlerterCond = me.rowAlerter;
      if (Ext.isObject(rowAlerterCond) {
        var returnVar = me.buildCondition(rowAlerterCond);
        me.rowHighlightConfig = returnVar;
      } else {
        me.rowHighlightConfig = 'orangeHighlight'
     }
     return eval(me.rowHighlightConfig);
   }

   this.callParent(arguments); // Now call the parent initComponent
}