I've written an extension to Ext.grid.column.Column that allows full-blown ExtJS 4 components to be returned from the renderer function. I know a lot of people have written custom code to do this sort of thing but as far as I'm aware no-one has ever wrapped it up in a reusable class.


The technique will be familiar to anyone who has tried to do it themselves: render the grid without the components then slip the components in afterwards. Beyond doing the obvious I've also tried to put in some size management and logic for doing component destruction.

Performance for a small number of records is absolutely fine but it should come as no surprise that it doesn't scale particularly well. The age-old technique of faking components using some HTML and CSS remains vastly superior if you need performance with a moderately large number of records. If anyone has any suggestions for improving performance that would obviously be welcome.

I hope that what my extension lacks in scaling it makes up for in saved development time. There are some demos if you follow the link but, as a taster, the code for rendering a combobox might look something like this:

Ext.create('Ext.grid.Panel', { 
    columns: [{
        dataIndex: 'status', 
        xtype: 'componentcolumn',
        renderer: function(status) { 
            return { 
                store: ['Available', 'Away', 'Busy', 'Offline'], 
                value: status, 
                xtype: 'combobox' 
The renderer in this example returns a config and xtype but it could also return the actual component.

In the demos I show checkboxes, textfields, progressbars and buttons, though in my test cases I have it working with all sorts of other components.

For reference, the closest existing UX that I'm aware of is Condor's ComponentListView for ExtJS 3: