Extjs, define scope of column's renderer function - extjs4

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;
},
}