Component Column - Components in Grid Cells

[skirtle]

What you're trying to do may be beyond the scaling capabilities of a Component Column approach. You should probably be using an Ext.grid.column.Check instead.

I need a complete test case (preferably a Sencha Fiddle) if you'd like my help profiling this. Have you tried profiling this yourself? For a 5 second delay the profiler should be pretty conclusive.

[harmeet771122]

What you're trying to do may be beyond the scaling capabilities of a Component Column approach. You should probably be using an Ext.grid.column.Check instead.

I need a complete test case (preferably a Sencha Fiddle) if you'd like my help profiling this. Have you tried profiling this yourself? For a 5 second delay the profiler should be pretty conclusive.

Thanks for your help skirtle.

Here is Sencha Fiddle for the functionality that I am trying to achieve.

Link to Sencha Fiddle: https://fiddle.sencha.com/#fiddle/5o3

When we click parent node checkbox all the child nodes should be check. Issue here is that rerendering of rows take too much time.

screenshot.jpg

[skirtle]

I accidentally edited your original Fiddle. Apologies for that, I don't know why it let me save it.

There were various potential ways to optimize this but the best seemed to be removing the refresh entirely:

https://fiddle.sencha.com/#fiddle/5pq

I've marked the key sections with the word 'New'.

Notice how the store events are discarded and the checkboxes are updated directly instead. I used internalId as a flag to find the correct checkbox, which is probably not the best way to do it but I didn't have a better identifier to work with on those models.

[Vizzlepuff]

Is there currently a plan to upgrade Component Column for use with ExtJS 5?

I was hoping the new "Widget Column" functionality of ExtJS would replace the need for Component Column UX but that is unfortunately not the case.

With "Widget Column" it expects that the component in every row of the column is the same, with only the value changed. Component Column, on the other hand, you are able to specify a completely different custom component for every row; this is the functionality I need!

Thank you very much to anyone that is able to offer some assistance.

[skirtle]

Element.getFrameWidth has been removed in ExtJS 5, so in calculateFrameWidth this line will fail:

return this.lastFrameWidth = parentDiv.getFrameWidth('lr') + parentTd.getFrameWidth('lr');

Instead try:

return this.lastFrameWidth = parentDiv.getBorderWidth('lr') + parentDiv.getPadding('lr') + parentTd.getBorderWidth('lr') + parentTd.getPadding('lr');

For me that got everything rendering, though in some (not all) of my test cases I saw some sizing problems. I'll investigate those when I get chance but I suspect they're caused by this bug with grid columns:

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

If anyone has any test cases for problems upgrading Component Column from ExtJS 4 to 5 then please post a Fiddle to this thread so I can get them fixed.

[johanhaest]

I get a weird error when using a component in another tab: Runtime-fout JavaScript: Missing DOM node in element garbage collection: combo-1563-triggerWrap

At happens when i click the tab where my grid with component column is rendered. I fixed this with the following: componentGC, but when destroy is called ( Ext.destroy(this.getRefItems()); ) it just crashes again. Cant seem to figure out why.

               
{
    dataIndex: 'Contact',
    flex: 1,
    xtype: 'componentcolumn',
    componentGC: false,
    renderer: function (contact, meta, record) {
        return {
            xtype: 'combo',
            store: userStore,
            valueField: 'Id',
            displayField: 'Name',
            value: contact
        }
    }
}

[skirtle]

You need to keep componentGC turned on to ensure you don't get any leaks.

The scenario you've described works fine for me:



If you can get me a complete test case I'll investigate further,

[senchaui]

Hi Skirtle, I am using the column componet present in a popup and store is being loaded at our convenience, I am getting errors Like Ext.undefined can you help me please

[skirtle]

Are you using this extension?

If you are then put it in a Fiddle and I'll take a look.

[undeclared]

I am using this component, it's helped me a lot to get done something kind of unique (I have a grid inside each column)... but my problem is that, as soon as I add a summary, only one grid shows for multiple (up to 30 results)...

So basicly there's some code in the renderer for grid summaries that makes sure it's somehow the last thing rendered, gotta find it...

Not asking for help at this point, but great extension I must say.