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
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…