EXTJS 6 Grid Column Renderer Function - where do you define it? - extjs

Question

In EXTJS 4/5 you could create an inline function which you could then use as a grid column renderer, like this
function myColumnRenderer(value, metaData, record, rowIndex, colIndex, store){
//do something with the data and return
return value;
}
and in your grid's column definition you would reference the renderer like this
columns:[
{ text: 'ColA', dataIndex: 'ColA', renderer: myColumnRenderer},
{ text: 'ColB', dataIndex: 'ColB', renderer: myColumnRenderer}
]
In EXTJS 6.5, can you still do this and if so where do you define the renderer function? In the controller, or viewModel, or elsewhere? I've tried putting the function in the controller and putting this.myColumnRenderer in the renderer of the column but it never seems to get called.
Looks like this is an option, just not sure if it's the correct way to do it
columns:[
{ text: 'ColA', dataIndex: 'ColA', renderer: function(value, metaData, record, rowIndex, colIndex, store) {
return this.getController().myColumnRenderer(value, metaData, record, rowIndex, colIndex, store);
}},
{ text: 'ColB', dataIndex: 'ColB', renderer: function(value, metaData, record, rowIndex, colIndex, store) {
return this.getController().myColumnRenderer(value, metaData, record, rowIndex, colIndex, store);
}}
]

Answer 1

In ExtJS 6 you can also create but inline function but instead of inline function we can create ViewController for grid or any view like below example
Ext.define('MyViewController', {
extend : 'Ext.app.ViewController',
alias: 'controller.myview',
// This method is called as a "handler" for the Add button in our view
onAddClick: function() {
Ext.Msg.alert('Add', 'The Add button was clicked');
}
});
Ext.define('MyView', {
extend: 'Ext.Panel',
controller: 'myview',
items: [{
xtype: 'button',
text: 'Add',
handler: 'onAddClick', // calls MyViewController's onAddClick method
}]
});
In this FIDDLE, I have create a demo using viewController and grid component. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('GridController', {
extend: 'Ext.app.ViewController',
alias: 'controller.gridcntr',
//This event will fire for grid column renderer
onColRender: function (value, metaData, record, rowIndex, colIndex, store) {
console.log(value);
return value;
}
});
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create({
xtype: 'grid',
controller: 'gridcntr',
title: 'user data',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200,
renderer: 'onColRender'
}, {
text: 'Email',
dataIndex: 'email',
width: 250,
renderer: 'onColRender'
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120,
renderer: 'onColRender'
}],
layout: 'fit',
fullscreen: true,
renderTo:Ext.getBody()
});
}
});

Answer 2

You can use the renderer like this ExtJs 6
columns: [
{ width:"100%", renderer: function(value,metaData,records,view) {
//your conditions
}}]