Saturday, December 17, 2011

Rendering EXTJs components in a Grid Panel

EXTJs provides the EditorGridPanel where, you can have the editors specified and those components will be rendered while editing the record.
But you may want to render some components all the time in he grid columns. I had a similar requirement. This is pretty easy to achieve...
Define a renderer function or the column:
function columnRenderer(value,.......){
var id = Ext.id();

(function() {
new Ext.Button({
renderTo:id,
value:"Hello"
});
).defer(25);

return (String.format('<div id="{0}"></div>',id));

}

Thats it the renderer will create a div with a specific id, and the component will b rendered to that div after the specified time interval.
You can also create the component and render it to a known id in the afterRender method...

3 comments:

  1. For EXTJS 4 the code change would be:

    var id = Ext.id();

    Ext.Function.defer(function() {
    new Ext.Button({
    renderTo:id,
    value:"Hello"
    });
    }, 25);

    return (Ext.String.format('<div id="{0}"></div>',id));

    ReplyDelete
  2. Thanks !!! was in really in need of this solution. :)

    ReplyDelete