View Full Version : Editor Grid Combo Box

11 Nov 2010, 8:50 AM
I have an editor grid that I am trying to use a combocolumn with. I seem to be close to getting this functional. The combocolumn identifies the correct value on load and when I click to edit the column I get the combobox drop down. The two problems are that 1) the initial value displays as the first option in the combobox instead of the value from the field. 2) If I change the option and click off the grid it does not change the field value to the new selection. Here is the code.

AdGrid = function(){

function disabled(val, metaData, record, rowIndex, colIndex, store){
if(record.get('excluded') != null){
return '<span style="color:grey;">' + val + '</span>'
return '<b>' + val + '</b>';

Ext.util.Format.comboRenderer = function(Adcombo){
return function(value){
var record = Adcombo.findRecord(Adcombo.valueField, value);
return record ? record.get(Adcombo.displayField) : Adcombo.valueNotFoundText;

Ext.grid.ComboColumn = Ext.extend(Ext.grid.Column, {
constructor: function(cfg){
Ext.grid.ComboColumn.superclass.constructor.call(this, cfg);
this.renderer = Ext.util.Format.comboRenderer(this.editor.field ? this.editor.field : this.editor);

Ext.apply(Ext.grid.Column.types, {
combocolumn: Ext.grid.ComboColumn

var Adcombo = new Ext.form.ComboBox({
typeAhead: true,
autoSelect: false,
triggerAction: 'all',
mode: 'local',
forceSelection: true,
selectOnFocus: true,
valueNotFoundText: 'Included',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
data: [[1, 'Account'], [2, 'Service Account'], [3,'Administrative Account'], [4,'Customer Excluded']]
valueField: 'myId',
displayField: 'displayText',
lazyRender: true,
listClass: 'x-combo-list-small'

var Adcolumns = [{
header: 'LastLogon',
width: 150,
dataIndex: 'LastLogon',
renderer: disabled,
sortable: true
header: 'WhenCreated',
width: 150,
dataIndex: 'WhenCreated',
renderer: disabled,
sortable: true
id: 'logonName',
header: 'logonName',
dataIndex: 'logonName',
renderer: disabled,
sortable: true,
readOnly: true,
width: 150
xtype: 'combocolumn',
header: 'Reason',
editor: Adcombo,
renderer: Ext.util.Format.comboRenderer(Adcombo),
width: 150,
sortable: true

adStore = new Ext.data.Store({
id: 'adStore',
autodestroy: true,
url: '/php/main/ad.php',
method: 'POST',
baseParams: {task: 'LISTING'},
autoLoad: false,
reader: new Ext.data.JsonReader({
root: 'results',
total: 'total',
fields:['logonName','LastLogon','WhenCreated', 'reason','excluded']
sortInfo:{field: 'logonName', direction: "ASC"}

AdGrid.superclass.constructor.call(this, {
id: 'AdGrid',
loadMask: true,
store: adStore,
columns: Adcolumns,
clicksToEdit: 1,
autoExpandColumn: 'logonName'

var adUsersTplMarkup = [
'<b>Total:</b> {total}<br/>',
'<b>Excluded:</b> {excluded}<br/><br/>',
'<b>Active:</b> {active}<br/>'

var adUsersTpl = new Ext.Template(adUsersTplMarkup);


Ext.extend(AdGrid, Ext.grid.EditorGridPanel);

As always any help is appreciated. Thanks

12 Nov 2010, 7:11 AM
No suggestions?