Component Column - Components in Grid Cells

http://skirtlesden.com/ux/component-column

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.

Attachment 28495

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:

Code:

---

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:

http://www.sencha.com/forum/showthread.php?79210

Awesome! I can't wait to try this out. I saw your CTemplate as well, looks good!

Indeed an awsome component! Many thanks!=D>

I have a problem with the componentcolumn being used in a grid with a cellediting plugin. When I use a checkbox xtype in the renderer for the componentcolumn, the store's record is not updated (getUpdatedRecords() returns nothing). I also listen to the 'update' event of the store and that one is not fired. When I modify another column using an editor config (as also was this column previously), I receive the stores update event and can see that the records field value of the componentcolumn defers from what I see on the screen. Configuring the same column as an editor with a checkbox xtype the record's fields are updated (was my previous config).

Forgot to tell:
ExtJs version: 4.0.7
Browser: FF 9.0.1, FB 1.9.0.B1

Do you know what's the problem?

Thanks!

Hi Skirtle,

Nice component. However when i tried to use this in my ExtJS V4.1.0Beta code, it is giving me errors. Can you confirm if this works for ExtJS V4.1.0Beta?

When i debug the code it is failing in CTemplate.js...

SCRIPT28: Out of stack space
CTemplate.js?_dc=1326912145867, line 90 character 13

Code:

---

if (me.pollId) {
  clearTimeout(me.pollId);
}

---

Thanks in advance.
Pavan.

@siebe vos. For a checkbox you might be better off using Ext.ux.CheckColumn, as demonstrated here:

http://dev.sencha.com/deploy/ext-4.0...l-editing.html

However, if you did do it using a Component Column it would be something like this:

Code:

---

{
    dataIndex: 'registered',
    text: 'Registered',
    xtype: 'componentcolumn',
    renderer: function(val, meta, record) {
        return {
            checked: val,
            xtype: 'checkbox',
            handler: function(checkbox, checked) {
                record.set('registered', checked);
            }
        }
    }
}

---

@pavanextjs. I will send you an updated version of CTemplate that's compatible with 4.1.0-beta-1. If anyone else wants it just send me a PM. I'll do a proper release once 4.1.0 is final.

Hi Skirtle,

I did not get your reply on the forum via mail. Yesterday I forgot to mention the ExtJs version and browser. After I added them to my original post, I saw that you replied. This is indeed what I needed! Many thanks!

Thanks so much Skirtle, that is working :)

Is there anyway to suppress the component from redrawing when the store is updated?

It's not easy to do that at present but I agree this would be a good feature to add. If you could let me know your use case I'll try to include it in the next version.

I think I'd do this by changing renderComponent in CTemplate. Currently it just calls the component's render method but that won't work if the component is already rendered. If that method also supported moving an existing component it should be possible to keep the same component when the grid refreshes rather than creating a new one. Without knowing your use case I don't know whether this would meet you needs.

You might be able to fake it for now by suspending events on the store but that may have other consequences.