Extjs, define scope of column's renderer function

Question

I think that, bydefault renderer always refer to its calling object as scope. and we do not have to define anything but in my grid i have different behaviour.

I have to define rendere function runtime.

I make column object and for each column i assign renderer.

for (var i = 0; i < columns.length; i++) {
      newRenderer = function (v, m, r, rI, cI, s)
      { 
           if(this.originalRend)  <<<<<-----------------
           // "this" is not object of column but whole page.
           { 
                 //then call original} 
           else {
                 // call new renderer
           }
      }
      columns[i].originalRend = columns[i].renderer;
      columns[i].renderer = newRenderer;
}

In my newRenderer function "THIS" does not refer to column object. WHY????? and how to do that????

Answer 1

You should be able to use scope as a config option of the column, and that will be used by the renderer:

{
    renderer: function(val){
        return val.trim();
    },
    scope: this
}

Or, in the case of your code:

for (var i = 0; i < columns.length; i++) { 
    newRenderer = function (v, m, r, rI, cI, s)
    { 
         if(this.originalRend)  <<<<<-----------------
         // "this" is not object of column but whole page.
         { 
             //then call original} 
         else {
             // call new renderer
         }
    }
    //THIS LINE ADDED:
    columns[i].scope = columns[i];
    columns[i].originalRend = columns[i].renderer;
    columns[i].renderer = newRenderer;
}

See docs here: http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.grid.column.Column-cfg-scope

Answer 2

Scope does not work as column or this. The best way is to overrite prepareData method of header container.

Ext.override(Ext.grid.header.Container, {
prepareData: function(data, rowIdx, record, view, panel) {
        //console.log("we r in prepare Data");
        var me        = this,
            obj       = {},
            headers   = me.gridDataColumns || me.getGridColumns(),
            headersLn = headers.length,
            dirtyCls = me.dirtyCls,
            colIdx    = 0,
            header,
            headerId,
            renderer,
            value,
            metaData,
            store = panel.store;

        for (; colIdx < headersLn; colIdx++) {
            metaData = {
                tdCls: '',
                style: ''
            };
            header = headers[colIdx];
            headerId = header.id;
            renderer = header.renderer;
            value = data[header.dataIndex];

            if (typeof renderer == "function") {
                value = renderer.call(
                    //--------change made below.------------------
                    header.scope || header || me.ownerCt, 
                    //----------------end-------------------------
                    value,
                    // metadata per cell passing an obj by reference so that
                    // it can be manipulated inside the renderer
                    metaData,
                    record,
                    rowIdx,
                    colIdx,
                    store,
                    view
                );
            }

            // <debug>
            if (metaData.css) {
                // This warning attribute is used by the compat layer
                obj.cssWarning = true;
                metaData.tdCls = metaData.css;
                delete metaData.css;
            }
            // </debug>
            if (me.markDirty) {
                obj[headerId + '-modified'] = record.isModified(header.dataIndex) ? dirtyCls : '';
            }
            obj[headerId+'-tdCls'] = metaData.tdCls;
            obj[headerId+'-tdAttr'] = metaData.tdAttr;
            obj[headerId+'-style'] = metaData.style;
            if (typeof value === 'undefined' || value === null || value === '') {
                value = header.emptyCellText;
            }
            obj[headerId] = value;
        }
        return obj;
    },

}