PDA

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



webfriend13
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>');
}else
{
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. :)

mitchellsimoens
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
}