PDA

View Full Version : Checkbox and combobox editor in same gridpanel column



segfault0
16 Sep 2014, 3:31 PM
I am using ExtJS version 4.1.3 and I am trying to have a column in a grid panel that has some rows with checkboxes and some with comboboxes. I have overwritten getEditor in my editing plugin and my column and have gotten close to a satisfactory solution but am still not happy.

The first thing I tried was giving the column an xtype of checkcolumn and then overwriting the getEditor function, but it seems like this had no effect (getEditor was never called, all of the rows were checkboxes). Is there a way to have a checkcolumn with some rows having a different editor?

Then I tried just using a regular column and overwriting the getEditor function to return a combobox for some rows and a checkbox for other rows. I also modified the renderer to show a checkbox for some rows. This all looks correct at first. The issue I have with this is that it takes two clicks to change a checkbox value for the first time (one to give focus to the checkboxes, and then another to change the value). Clicks after that change the value as expected. Is there a way to make it so that it does not need to clicks to change the checkbox value the first time?


Let me know if any of the code is unclear and I can try to explain or clarify. Sorry if this has been asked already, I wasn't able to find much of anything.

Cell-editing plugin:


var cellEditingCombustionObservation = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
getEditor:function (record, column) {
var grid = Ext.getCmp('hudDetailCombustionObservationGridPanelId');
var editor = column.getEditor(record);
if (!editor) {
return false;
}
if (!(editor instanceof Ext.grid.CellEditor)) {
editor = new Ext.grid.CellEditor({
//editorId:editorId,
field:editor,
ownerCt:this.grid
});
} else {
editor.ownerCt = this.grid;
}
editor.editingPlugin = this;
editor.isForTree = this.grid.isTree;
editor.on({
scope:this,
specialkey:this.onSpecialKey,
complete:this.onEditComplete,
canceledit:this.cancelEdit
});
return editor;
}
});


Gridpanel:


{
xtype: 'gridpanel',
id: 'hudDetailCombustionObservationGridPanelId',
name: 'hudDetailCombustionObservationGridPanelId',
title: 'Observations',
autoLoad: false,
border: true,
hideHeaders: true,
plugins: [cellEditingCombustionObservation],
features: [groupingFeatureCombustionObservation],
margin: '5 15 0 15',
selModel: {
selType: 'cellmodel'
},
store: 'HudDetailCombustionObservations',
columnLines: true,
autoScroll: false,
columns: {
autoScroll: false,
defaults: {
align: 'center',
hideable: false,
draggable: false,
sortable: false,
resizable: false
},


items: [
{
header: '',
dataIndex: 'hud_detail_combustion_observation__row_descr',
flex: 1,
getEditor: function(record, defaultField) {
return wx.app.getController('HudDetailCombustion').getObservationGridEditor(record, 0);
},
renderer: function(value, metaData, record) {
cellTextLeft(value, metaData);


var cellText;


var recordId = record.get('hud_detail_combustion_observation__id');
if(recordId == 9 || recordId == 12) {
var labelText = this.columns[0].getEditor(record).getFieldLabel();
cellText = labelText.slice(6) + ": " + value;
} else {
cellText = value;
}
return cellText;
}
},
{
// xtype: 'checkcolumn',
header: '',
dataIndex: 'hud_detail_combustion_observation__appliance_one_value',
getEditor: function(record, defaultField) {
return wx.app.getController('HudDetailCombustion').getObservationGridEditor(record, 1);
},
renderer: function(value, metaData, record) {
var renderData;


var recordId = record.get('hud_detail_combustion_observation__id');


if(recordId == 1 || recordId == 2 || recordId == 4) {
renderData = record.get('hud_detail_combustion_observation__appliance_one_value');
} else {
renderData = (new Ext.ux.CheckColumn()).renderer(value);
}
return renderData;
}
}
]
}
}
]
}



Function to select an editor:


getObservationGridEditor: function (record, columnIdx) {
// First find out which column we are using and build a name or something based on that for the editor
// Do I need to do this?? ^^^ Maybe for enumcombos?
var editor = null;
var recordId = record.get('hud_detail_combustion_observation__id');


if (columnIdx == 0) {
if (recordId == 9 || recordId == 12) {
var fieldLabel = ' ';
var labelWidth;
if (recordId == 9) {
fieldLabel += 'Other general safety problem';
labelWidth = 155;
} else if (recordId == 12) {
fieldLabel += 'Other venting problem';
labelWidth = 120;
}
editor = Ext.create('Ext.form.field.Text');
editor.fieldLabel = fieldLabel;
editor.labelWidth = labelWidth;
editor.labelStyle = 'font-size: 11px';
}
} else {
// Editors are the same for every other column
console.log('recordId' + recordId);
switch(recordId) {
case 1:
editor = Ext.create('Ext.form.field.ComboBox');
break;


case 2:
editor = Ext.create('Ext.form.field.ComboBox');
break;


case 4:
editor = Ext.create('Ext.form.field.ComboBox');
break;


default:
editor = Ext.create('Ext.form.field.Checkbox');
editor.focusCls = '';
break;
}
}

return editor;
}

slemmon
1 Oct 2014, 11:28 PM
Hi,

The Ext4 API doesn't support adding components to grid cells. Ext 5 does if you're considering an upgrade or else you might check out: http://skirtlesden.com/ux/component-column