CODEWITHSUNDEEP
javascriptvariablesextjs
fastcodejava
fastcodejava

Reputation: 41097

Cannot acces this.myvar in extjs

I am dynamically adding extra columns to a ExtJs grid, so I store the index as a class variable. But this does seem to work as shown below. Why is this?

for ( var i = 0; i < names.length; i++) {
var column = Ext.create('Ext.grid.column.Column', {
    text : names[i],
    header : names[i],
    width : 80,
    dIndx: i,
    renderer: function (val, p, record) {
        var value = record.data.values[this.dIndx];  // doesn't work
        var value = record.data.values[p.column.dIndx];  // this works
    return value ? value : "";
    }
    });
 // add column to grid etc.

Upvotes: 0

Views: 69

Answers (1)

sra
sra

Reputation: 23973

I think this is the scope of the controller Ext.grid.Panel (if not defined otherwise, see edit) that is why it wan't work by using the keyword. anyway the second is the better solution IMO

Edit:

As commented by @kevhender a scope can be defined for the renderer. But as you are using one of the arguments this makes no sense. Anyway I missed to mention it.

Edit 2 - why is the default scope Ext.grid.Panel:

Here's a snipped from the function that process the rendering. The Method is private and therefore not listed in the API. Anyway here's the source link. Note that the renderer get called with either a given scope or the scope of the owner container column.renderer.call(column.scope || me.ownerCt,//... the owner of a view is the panel where it is nested into.

/**
 * @private
 * Emits the HTML representing a single grid cell into the passed output stream (which is an array of strings).
 *
 * @param {Ext.grid.column.Column} column The column definition for which to render a cell.
 * @param {Number} recordIndex The row index (zero based within the {@link #store}) for which to render the cell.
 * @param {Number} columnIndex The column index (zero based) for which to render the cell.
 * @param {String[]} out The output stream into which the HTML strings are appended.
 */
renderCell: function(column, record, recordIndex, columnIndex, out) {
    //... more code
    if (column.renderer && column.renderer.call) {
        value = column.renderer.call(column.scope || me.ownerCt, fieldValue, cellValues, record, recordIndex, columnIndex, me.dataSource, me);
        if (cellValues.css) {
            // This warning attribute is used by the compat layer
            // TODO: remove when compat layer becomes deprecated
            record.cssWarning = true;
            cellValues.tdCls += ' ' + cellValues.css;
            delete cellValues.css;
        }
    }
    // ... more code

Upvotes: 1

Related Questions