Question

Is there a way to to place a checkbox and 2 numberfields in a single column? Something like

+-----------------------+-----------------------+
|        Column 1       |        Column 2       |
+-----------------------+-----------------------+
|                       |    CB     NF     NF   |
+-----------------------+-----------------------+
|                       |    CB     NF     NF   |
+-----------------------+-----------------------+
|                       |    CB     NF     NF   |
+-----------------------------------------------+

Answer 1

The “standard” method involves using a feature to edit the row/column template to include divs with ids, then rendering the components into those divs with the renderTo config. However, since you’re working by column instead of by row, you can take an easier approach.

In your column config, use a custom renderer like this:

// May not be exact, I just came up with this on the spot
renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
    return [
        "<div id='combobox_", rowIdx, "'></div>",
        "<div id='numberfield_1_", rowIdx, "'></div>",
        "<div id='numberfield_2_", rowIdx, "'></div>"
    ].join("");
}

So now each cell in this column has three divs with unique ids (you may need to replace “rowIdx” with some other method of identification, like record.id). Then it’s up to you to create the components and keep them rendered.

Note that the refresh method of the grid’s view will be called every time the grid updates, including sorting, filtering, hiding columns, etc. So you need to watch for the afterrefresh event or something similar and re-render your components as needed. To trick a rendered component into re-rendering, use myComponent.rendered = false; myComponent.render(); and it should work.

There are probably plugins that people have written that will manage a good portion of this process for you, but this is the underlying concept. It’s not pretty, but it works.