PDA

View Full Version : Custom Cell Renderer won't execute



P4G0
16 Apr 2012, 1:54 AM
Hi everybody,

I want to use a custom renderer on some cells of a comparision table. Unfortunately the custom renderer doesn't get executed:

Ext.define('App.view.ParameterDiffTable', {

extend: 'Ext.grid.Panel',

columns: [
{header: 'Parameter', dataIndex: 'name'},
{header: 'Requested', dataIndex: 'requestedValue', renderer: this.diffRenderer},
{header: 'Configured', dataIndex: 'configuredValue', renderer: this.diffRenderer}
],

diffRenderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
console.log('test');
if(record.raw.error) {
metaData.style='color:red;';
}
return value;
}

});

The table just shows all data without markup. Even the console doesn't show the 'test' entries. If I change the code to the following, everything works but the renderer function is in global scope:

Ext.define('App.view.ParameterDiffTable', {

extend: 'Ext.grid.Panel',

columns: [
{header: 'Parameter', dataIndex: 'name'},
{header: 'Requested', dataIndex: 'requestedValue', renderer: diffRenderer},
{header: 'Configured', dataIndex: 'configuredValue', renderer: diffRenderer}
]

});


function diffRenderer(value, metaData, record, rowIndex, colIndex, store, view) {
console.log('test');
if(record.raw.error) {
metaData.style='color:red;';
}
return value;
}

So how could I fix this without declaring a global "diffRenderer" function?

evant
16 Apr 2012, 2:57 AM
There's 2 problems here:

1) You're defining the columns at the class level, not the instance level, so even if it did work, "this" would not be pointing at any instance.

2) Evaluation order, even assuming the this reference would work, you're essentially doing:



var a, b;
b = a + 1;
a = 1;
console.log(b);


The diffRenderer function hasn't been processed yet.

Instead:



Ext.define('App.view.ParameterDiffTable', {

extend: 'Ext.grid.Panel',

initComponent: function() {
this.columns = [{
header: 'Parameter',
dataIndex: 'name'
}, {
header: 'Requested',
dataIndex: 'requestedValue',
renderer: this.diffRenderer
}, {
header: 'Configured',
dataIndex: 'configuredValue',
renderer: this.diffRenderer
}];
this.callParent();
},
diffRenderer: function(value, metaData, record) {
console.log('test');
if(record.raw.error) {
metaData.style = 'color:red;';
}
return value;
}
});

P4G0
16 Apr 2012, 3:20 AM
So you cannot use JSON markup for such tasks? I don't wanted to use the initComponent function, because the JSON Format is much more compact and I thought that this would lead to "good code" (because you cannot start using dirty hacks etc).

I want to use clean MVC Design, is there maybe another approach for this purpose which is considered as "best practise"?

evant
16 Apr 2012, 3:24 AM
No, for the reasons I outlined above.

There's nothing wrong with using initComponent, it has nothing to do with MVC at all.

P4G0
16 Apr 2012, 3:36 AM
Ok thanks, I'll give a chance to initComponent ;)