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 only way to achieve this in 4.2x or below is to use a custom component like Skirtle's comonent column http://skirtlesden.com/ux/component-column This column type will let you insert any arbitrary components into a cell.

Upcoming release of ExtJS will have something called Gadget Grid that will allow for similar functionality.

Answer 2

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.

Answer 3

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
        header: 'Category',
        dataIndex: 'CategoryName',
        editor: {
            xtype: 'combobox',
            store: 'categoryStore',
            displayField: 'CategoryName',
            valueField: 'CategoryID'
        }
    }],
    width: 450,
    renderTo: Ext.getElementById('hede')
});

Answer 4

Try this link..

http://docs.sencha.com/extjs/5.0/components/grids/widgets_widgets_columns.html

This is from Extjs 5.

Update:

{
    xtype: 'widgetcolumn',
    text: 'Progress',
    width: 120,
    widget: {
        xtype: 'combobox'
    }
}

This one worked like a charm.

Answer 5

Ok, here is a complete example of how to use Combo Boxes in Sencha EXTJS:

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
        xtype: 'gridcolumn',
        text: 'UserStatus',
        dataIndex: 'userstatus',
        editor: {
            xtype: 'combobox',
            allowBlank: false,
            displayField: 'Name',
            valueField: 'Id',
            queryMode: 'local',
            store: this.getStatusChoicesStore()
        }
    }],
    width: 450,
    renderTo: Ext.getElementById('hede')
});

Now the this.getStatusChoicesStore() function will provide us with the choices for this combo box (you can define that function anywhere, or just inline it inside the columns definition, for me it keeps easier to read if I create a function for it):

getStatusChoicesStore: function() {
    return Ext.create('Ext.data.Store', {
        data: [{
            Id: 0,
            Name: "Active"
        }, {
            Id: 1,
            Name: "Inactive"
        }]
    });
},

Additionally, more info and examples can be found here.