Dynamic edit component

I'm using those lovely component for my, quite complicated, grid and so far it works extremely well.
I've managed to add editing using the standard CellEditing plugin and it works fine for my normal cells.

The problem I have is that I want to be able to display a combo box in some edit cells but only when the user starts editing the cell. If it would be column specific this would be easy to accomplish, but the requirement says that it has to be configurable on a cell level.

The question is, how do I accomplish this dynamic selection of edit component? I can easily add configuration to the cell record, but I don't really understand where to add the controlling code that will use this config?

If your question is about the CellEditing plugin I suggest starting a new thread in the Q&A forum. I see no reason why you couldn't update the contents of the combobox's store in a beforeedit listener.

To achieve something like this with Component Column I would use the renderer to output a container and dynamically add a combobox on the click event. This could get quite complex as you'd need to manage many of the features of the CellEditing plugin yourself. Hiding the combobox and keyboard navigation are two obvious pain points.

Component Column is not intended as a direct replacement for the built-in editor plugins though it is often used in that way. Component Column just provides a convenient way to get a component into a grid cell. Editing is much more than that.

I have a question, i have a container with 2 items on it, one textfield, one combobox. I need to fill this items with info from one field of my store. Something like this:

Code:

store = [{id: "3", Version: "123,FX"}]

I want to render 123 in the textfield and FX is one of the values of combobox store. In the same way i need if textfield or combo changes impact this change in the store. Can you give me some help here?

Completely untested but hopefully it'll give you some ideas. Managing focus strikes me as an obvious pain point. If you try to jump from one field to another the blur listener will cause a grid refresh and remove the focus on the new field. Depending on how and when you want the models updated you may want to use some alternative to a blur listener (e.g. if there's a save button you could put that logic in there rather than updating each record on blur). You could also directly update the data property rather than using set but that could cause other problems depending on how your records are being used.

Resize

Hi! I'm using version 4.1.1. Since switching applyTemplate to apply all works great except one. After adding several elements Grid doesn't increase size. If I add for example height: 1000 to Grid config I see all elements, but fixed height it's not acceptable. Any suggestions how can I fix it?

From what you've said it sounds like you're trying to use auto-height for grids. Not sure the framework officially supports that but it should be possible to make it work.

It's also not entirely clear what you mean by 'adding several elements'. I assume by 'elements' you mean 'rows' but I'm not sure whether you just mean that you have a lot of rows or whether you're describing a phenomenon that only occurs as a result of adding rows dynamically.

My guess would be that injecting the buttons is causing the grid view to increase in height but the framework is oblivious to this height change, so the surrounding layouts aren't heighting their containers correctly. You might want to try calling updateLayout to kick it into resizing everything. You may need to do that on a slight delay to ensure it happens after the injection of the buttons.

Resize

Yes, you are right and understood what I mean. I want to use auto-height. "Elements" the same as "rows". Firstly, I'm creating a Grid and after that I'm adding elements to Grid's store. I don't know how many elements I need to add. If Grid hasn't got ComponentColumn doesn't matter how many rows are adding, Grid resize correctly, doing auto-height.
If Grid contains ComponentColumn after adding 1 - 5(it depends on height components) rows Grid resize right. Adding 6 or more rows you can see on previous picture.
I notice that If resize browser window Grid are increasing height to necessary and showing all content normally. UpdateLayout to viewport doesn't help.