Component Column - Components in Grid Cells

[chrisgotter]

nice plugin, 2 questions

#1 `autoSize()` does not work, is there a fix for this? I have set: `autoWidthComponents: true,` in the column's config, and and set `shrinkWrap:true,` in the actual contained component. This made the component size correctly but the column itself did not (the rest is just cut off). I am pretty sure that i need to override the `autoSize()` method, but i keep getting lost trying to figure out how.

#2 is there a shorthand way of doing this where we just give the column an `items` field like a regular container?

[skirtle]

@chrisgotter. You haven't said which version of ExtJS you're using but I can offer some suggestions.

I assume you're trying to size the column automatically based on the size of the components in that column. In theory I see no reason why this shouldn't be possible but keep in mind that autoSize() didn't even exist when I created Component Column.

Firstly you'd need to set autoWidthComponents: false. In this context 'auto width' means that the column will set the size of the components, which is the opposite of what you want. Just changing that might be enough to get it to work.

One potential problem would be the timing of your call to autoSize(). If it happens before the components are rendered and sized then it can't take those sizes into account. If there's a risk that this is happening then try deferring the call with a timer. That isn't necessarily the best solution (you'd ideally use an event) but it might help to diagnose where the problems lie.

If it still doesn't work I'd suggest starting out by trying something a little simpler, such as using fixed widths on the components rather than shrink-wrapping.

On the face of it I'd expect the built-in autoSize() to work fine but if you did need to override it then it should be fairly simple. Component Column supports component queries so you can grab the child components and use getWidth() to get the size of each one. Take the maximum of the widths, add on some extra space for the padding and borders and then set the column width. You can ignore the superclass implementation altogether, there's no need to call callParent().

I can think of a few different ways to interpret question 2 and without more context I can't be entirely sure what you're asking. That said, I'm pretty sure the answer is no, there's no support for that.

[chrisgotter]

thanks for your prompt response, I am using extjs 4.2.4
The double click on the column border resizing the column to fit its contents was not working and the only thing that autoWidthComponents: false seems to do is fix that.
i actually had my suspissions about order of operations, but i was having a hard time trying to fix the order in which the rendering and resizing events were handled


lastly regarding "keep in mind that autoSize() didn't even exist when I created Component Column." I don't blame you, at worst you did not anticipate the affect of an edge case when using a feature which was never added. I blame sencha for not including this feature in the first place and handling the problem itself. You did some great work without which there isn't a snowballs chance in hell that i could get this thing to work at all, so thanks.
p.s. - question 2 was just syntactic sugar so no big deal

[chrisgotter]

adding this worked thanks for the the idea, not the ideal solution but after some therapy i will learn to live with it

        viewConfig: {
            listeners: {
                refresh: function (dataview) {
                setTimeout(function () {
                        Ext.each(dataview.panel.columns, function (column) {
                            column.autoSize();
                        })
                    },10);
                }
            }
        },

[bmacdon1]

@skirtle

Have you thought about upgrading the component column to be more compatible with ext js 6?

Bryan