View Full Version : Adding renderer specific functions in Controller instead of view

5 Mar 2012, 7:53 PM
Hi All,

I have created a gird with two columns. the second column shows a button in each row. following is the implementation.

header: 'Install',
align: 'center',
renderer: renderInstall, dataIndex: 'registered',
width: 100

// Renderer function
function renderInstall(value, id, r)

var id = Ext.id();
if (r.data.registered == false)
Ext.Function.defer(createGridButton, 1, this, [id, record]);
return('<div id="' + id + '"></div>');
createGridButton.defer(1, this, ['ReInstall', id, r]);
return('<div id="' + id + '"></div>');

function createGridButton(value, id, record) {
new Ext.Button({
text: value
,iconCls: IconManager.getIcon('package_add')
,handler : function(btn, e) {
// do whatever you want here
}).render(document.body, id);

My question:
1) How to define these functions in controller instead of view. (typical ExtJs4.0 stuff). With my current implementation, if I dont provide the fucntion definition in view, I get error saying function not found.
2) How to declare the renderer config in controller (I am not sure its even possible). Is it even a good practice to keep renderer config in view?

feel free to suggest any changes to the original code.

Thank you in advance. :)

6 Mar 2012, 9:55 AM
The renderer will have to stay in the view. I personally create a utility class to handle it:

Ext.define('MyApp.util.Templates', {
singleton : true',

userRenderer : function(val) {
//some logic

return val;

Then my column could be:

header : 'User',
dataIndex : 'user',
renderer : MyApp.util.Templates.userRenderer