Component Column - Components in Grid Cells

[hzmt]

The current issue I'm having is that the animated toggle component I'm adding skips animation when I toggle from 'yes' to 'no' because after the store value is updated it redraws the component.

Additionally, if I have autosync enabled on the store all the components in the grid will redraw when a toggle is.. toggled. I worked around that issue by disabling autosync.. overloading the component's onClick method and then passing the record and dataIndex into the component, then saving the record in the overloaded method instead. This also fixed the issues I was having with grids that had row editors on them.

[notjoshing]

I really like this component; thank you for coding this. I've been using it in a tool in which I need to be able to get back to the record from the rendered component, in this case a date field. Any thoughts on how to get back to the grid's record and column from the component?

Josh

[skirtle]

The easiest way is probably just to capture the record in the closure of whatever handler function you've written. Here's an example using a button:

{
    ...
    dataIndex: 'active',
    xtype: 'componentcolumn',
    renderer: function(value, meta, record) {
        return {
            text: value ? 'Disable' : 'Enable',
            xtype: 'button',
            handler: function() {
                record.set('active', !value);
            }
        };
    }
}

If you can't use a closure (perhaps because the function is declared elsewhere like it would be in the MVC) then you could just save the record as a property on the component and grab it when you need it.

[notjoshing]

Nice approach. I've tried it out and it works.

Thanks!

[mankz]

Nice work! Thought: Isn't it too late to try to clean up _after_ the dom elements have all been wiped?

 me.mon(view, 'refresh', me.onViewChange, me);
        me.mon(view, 'itemupdate', me.onViewChange, me);

Perhaps intercepting the grid views 'refresh' method and bufferRender (or whatever it's called for single item redraw) to clean up before the dom elements are gone could be a safer bet?

[skirtle]

I'm not sure I follow. Why might it be too late to destroy a component after its el is removed from the DOM? The tests I've done suggest that the components do get cleaned up using this approach. Is there a potential leak I'm missing doing things this way?

[mankz]

Seems I misunderstood how the browser GC worked, I ran some tests in sIEve and couldn't find anything odd. Disregard my ramblings

[Jeff Liotta]

My original support request thread is at
http://www.sencha.com/forum/showthread.php?192591-Using-Ext-widgets-in-Grid-cells&p=773529#post773529

I am now able to render Ext widgets in grid cells using Skirtle's plugin, thanks!!
I am facing another problem now wherein findField is not able to find these Ext widgets embedded in grid cells?

Do you know if findField is only for form panels and NOT for grid panels? Or is this a limitation of plugin or bug or something else?

I have a main form panel (id:framework), which has another form panel (blocks container) as one of its items.
This blocks container has multiple sub blocks which are rendered in individual form panels themselves.
For one of special block types, I used grid panel instead of form panel and this grid panel has Ext widgets rendered using Skirtle's plugin.
Name-based findField works for other fields which are part of form panel but not for grid panel field.

I have to do findField at multiple places and may not always know which block row or block I am working and hence want to do search using top level form.

Please advice.

[skirtle]

The fields rendered by Component column are just injected into the DOM, they aren't part of the component hierarchy. While it may look like they are children of the grid they actually aren't.

findField uses ComponentQuery behind the scenes. That walks the component hierarchy looking for suitable components.

From a quick look at how ComponentQuery is implemented, it looks like all you'd need to do is override getRefItems to return your fields. It gets a little tricky if your grid is refreshed as you'll need to make sure only the current items are returned.

I'll take a look to see if this is something that could feasibly be implemented in a future version but I'm not yet sure if it could be made to work in the general case.

[Jeff Liotta]

If it not much of pain, could you please provide some sample code/class that I can use/test as starting point and let you know how it goes.
I don't have grid refresh use case currently, so I believe you are suggesting to override Ext.ComponentQuery.
But I don't see getRefItems() method in Ext.ComponentQuery but found it in Ext.form.FieldSet.


I am new to Ext JS and not overriden any Ext Core classes, so I may not be getting this.
Also Ext.ComponentQuery is singleton if that matters.