Extjs - How to show combobox in Grid column

Question

I have a gridpanel include date and combo column jsfiddle

But I don't want click to show my combo. I want show my combo without click, not hide inside cell like

and the same for date column like

I think chage to clicksToEdit: 0 but fail

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })
]

How to do that, thanks

Answer 1

The combobox or datepicker are only injected once you click on the cell, they simply don't exist in the grid before you click. The way to change the appearance of a cell is by using the renderer on the column. This way you could add a fake triggerbox as a background image or something like that.

In reply to your comment, here's how you could do it:

{
    xtype: 'gridcolumn',
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        metaData.tdCls = 'fake-combo';

        return value;
    },
    text: 'MyColumn8',
    editor: {
        xtype: 'combobox',
        store: ...
    }
}

Study the docs for all the renderer options. There are different classes you can specify and attributes that will be used by the DomHelper. The css class could have a background image, but you have to experiment here. It won't be easy to get a consistent layout with what you want to do, but you have full access to the div that is rendered into the cell. Make sure to inspect the results with Firebug or Chrome Dev Tools, it will show you exactly what happens.

Though you could screenshot a combobox and set it as a background image. But better don't try to create a combobox in the renderer, that's not how it works. Having a real combobox for every row is custom only and could impact performance if you have a lot of rows.