Combo box and check box in grid for editor in extjs 4?

Question

I design the grid in extjs with editor option. I need the combo box as a column and also need combo box when i edit the grid. The i need delete column as the check box column for both edit and normal grid. Its not working. can any one please help me

Here is the snippet:

this.mcmGridPanel = new Ext.grid.GridPanel({
            height: 300,
            width: 690,
            title: 'Results',
            store: store,
            multiSelect: true,
            x: 0,
            y: 170,
            columns: [
                { xtype: 'gridcolumn', text: 'FlightNumber', sortable: true, flex: 1, width: 150, dataIndex: 'FlightNumber', hidden: true,
                    editor: new Ext.form.field.ComboBox({
                                typeAhead: true,
                                triggerAction: 'all',
                                selectOnTab: true,
                                lazyRender: true,
                                listClass: 'x-combo-list-small'
                            })  
                },
                { xtype: 'gridcolumn', text: 'Origin',  sortable: true, width: 150, dataIndex: 'Origin',
                    editor: {
                        editor: new Ext.form.field.ComboBox({
                            typeAhead: true,
                            triggerAction: 'all',
                            selectOnTab: true,
                            lazyRender: true,
                            listClass: 'x-combo-list-small'
                        })  
                    }
                },  
                { xtype: 'gridcolumn', text: 'Destination',  sortable: true, width: 150, dataIndex: 'Destination',
                    editor: {
                        editor: new Ext.form.field.ComboBox({
                            typeAhead: true,
                            triggerAction: 'all',
                            selectOnTab: true,
                            lazyRender: true,
                            listClass: 'x-combo-list-small'
                        })  
                    }
                },  

                { xtype: 'datecolumn', text: 'StartDate', width: 80, dataIndex: 'StartAvailability', format: 'Y-m-d',
                    editor: {
                        xtype: 'datefield',
                        allowBlank: false,
                        format: 'Y-m-d'
                    }
                },
                { header: 'StartTime', text: 'StartTime', width: 60, dataIndex: 'StartAvailabilityTime',  
                    editor: {
                        xtype: 'timefield',
                        format: 'H:i',
                        increment: 15,
                        allowBlank: false
                    }
                },
                { xtype: 'datecolumn', text: 'EndDate', width: 80, dataIndex: 'EndAvailability', format: 'Y-m-d',  
                    editor: {
                        xtype: 'datefield',
                        allowBlank: false,
                        format: 'Y-m-d'
                    }
                },
                { header: 'EndTime', text: 'EndTime', width: 60, dataIndex: 'EndAvailabilityTime',
                    editor: {
                        xtype: 'timefield',
                        format: 'H:i',
                        increment: 15,
                        allowBlank: false
                    }
                },
                {
                    xtype: 'gridcolumn',
                    text: 'Delete?',
                    header: 'Delete?',
                    dataIndex: 'delete',
                    width: 60,
                    renderer: function (value, meta, record, rowIndex, colIndex) {
                        return '<center><input type="checkbox" id="Delete-' + rowIndex + '"/></center>';
                    },
                    handler: function() {

                    },
                    //disabled: true,
                    editor: {
                        xtype: 'checkbox',
                        cls: 'x-grid-checkheader-editor',
                    }

                }
            ]
            });

I use the following code but Its not working. can any one please help me

Lorenz Meyer when i am double click on data in grid the combo box is not displayed.am using extjs4 copyright 2011. may be is this problem. — Suresh

Lorenz Meyer Lorenz Meyer · Accepted Answer · 2013-10-16T04:36:02

I don't see the function that should display the combobox. In order to get this to work automatically, you shoud add the RowEditing plugin.

Try to add this

plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    })
],

Look at this example in the doc. This will help you to get row editing work.

Is your column definition OK?
I got a combobox using this, but I'm aware this is not the full configuration needed:

{
    dataIndex: 'name',
    flex: 1,
    text: 'Name',
    field: {
        xtype: 'combobox'
    },
}

Update

I experienced today a similar problem: my textfields were not rendering.

The culprit was unexpected:
I use a custom template, and the css rules needed for the display were missing. All I had to do was rebuilding the app using sencha cmd sencha app build. This completed the files of the template, and the field of the roweditor displayed correctly.

Chances are that this is also the case with you...

Combo box and check box in grid for editor in extjs 4?

1 Answers

Update