PDA

View Full Version : Editor Grid Combo Box



mstidham
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: [
'myId',
'displayText'
],
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>Client:</b>{client}<br/>',
'<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

mstidham
12 Nov 2010, 7:11 AM
No suggestions?