View Full Version : Rendering custom components inside a grid row

25 Apr 2010, 5:39 AM

I'm trying to render a custom component I've created inside a grid. For the scope of this post though, I'll pretend that it's just a container with 2 buttons in it. Is there any clear-cut way to render components inside grid rows?

I've tried setting up a dummy column on the grid, and then using a renderer to spit out a placeholder <div> with an auto generated id to render the component to. This works... sometimes... I can't find an appropriate grid event to hook into to in order to render the components into the row, the components would just not show up sometimes.

There is then also the problem of the grid's store being updated in the background, which causes the grid to re-render itself, wiping out all the components that were manually added in the process.

Any ideas?

26 Apr 2010, 6:03 AM
I've faced the same problem. It seems to me that this question is not quite trivial.

26 Apr 2010, 4:09 PM

Would be nice to get some real feedback on this.

26 Apr 2010, 10:57 PM
I've posted a similar topic (http://www.extjs.com/forum/showthread.php?94203-Custom-Grid-Column-Render) about a month ago, and it doesn't seem as if ExtJS supports this kind of functionality (judging by the lack of input into the topic).

Any thoughts would be a blessing.


26 Apr 2010, 11:43 PM
The problem with components in grids is that you have to be very careful to destroy the component when a row is updated or deleted, otherwise you can end up with huge memory leaks.

I've not this for grids yet, but I did write ComponentDataView and ComponentListView user extensions that support components inside a DataView/ListView.

26 Apr 2010, 11:43 PM
did you look at the column renderer?

i guess that you already know that, but just in case...

27 Apr 2010, 1:02 AM
Column renderers only return HTML text, so it's not possible to return components. The only thing you can do is assign a unique id to the cell and defer the actual component creation, e.g.

renderer: function(v, meta){
var id = Ext.id();
meta.attr += ' id="' + id + '"';
var btn = new Ext.Button({text: v});
btn.render.defer(10, btn, [id]);
return '';

But please remember my comments about memory leaks!!!

27 Apr 2010, 5:59 AM
Could you post a link to an example using the component data view / list view?

27 Apr 2010, 6:46 AM
Could you post a link to an example using the component data view / list view?

Examples are in the ComponentDataView thread (http://www.extjs.com/forum/showthread.php?79210-ComponentDataView-Ext-components-inside-a-dataview-or-listview).