Problems with EditorGrid, Combobox and Store

[splittingred]

So I can't seem to get the ComboBox to work in an EditorGrid correctly. I can get it to load the grid, populate all the fields (except the one with the combobox), and then when I click on the 'account' cell to edit it, the store is properly loaded already and the combobox is also rendered perfect.

However, changing a field with the combobox doesn't work. I can force it to load only by clicking the refresh button in the PagingToolbar, but if I change something the display goes to the underlying value, not the displayValue.

This seems to me to be a problem with the renderer. Anyone have any ideas why it's not working or suggestions on how to do this better?

(p.s., this is Ext 1.1.1)



Ext.namespace('Ext.iltc');

Ext.iltc.CorrectionGrid = function(container,options) {
this.menu = new Ext.menu.Menu({ defaultAlign: 'tl-b?' });
this._loadStore(options);
this._loadColumnModel(options);

options = options || {};
Ext.applyIf(options,{
ds: this.store
,cm: this.cm
,selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
});

Ext.iltc.CorrectionGrid.superclass.constructor.call(this,container,options);

this.render();
this._loadToolbars();
}
Ext.extend(Ext.iltc.CorrectionGrid,Ext.grid.EditorGrid,{
stores: {}
,dialogs: {}

,_loadStore: function(options) {
this.store = new Ext.data.JsonStore({
url: CONNECTORS_URL+'/correction/index.php'
,root: 'results'
,totalProperty: 'total'
,fields: [
'id'
,'user_id','name'
,'record_id'
,'account_id','account'
,'checked_in'
,'checked_out'
,'new_checked_in'
,'new_checked_out'
,'new_hours'
,'date_submitted'
,'comments'
,'is_pending'
,'reason_id','reason'
,'is_new_record'
,'new_date','new_date_proper'
,'new_in_hour','new_in_min','new_in_ampm'
,'new_out_hour','new_out_min','new_out_ampm'
]
,baseParams: {
action: 'getList'
}
,remoteSort: false
});
this.store.load({
params: {
start: 0
,limit: 20
}
});
}


,_loadColumnModel: function(options) {
var Ed = Ext.grid.GridEditor;
var F = Ext.form;

this.cm = new Ext.grid.ColumnModel([
{
id: 'id'
,header: _('id')
,width: 40
,dataIndex: 'id'
},{
id: 'name'
,header: _('name')
,width: 175
,dataIndex: 'name'
},{
id: 'account'
,header: _('account')
,width: 225
,dataIndex: 'account'
,editor: Ext.iltc.AccountCombo.prototype.editorCombo()
,renderer: Ext.iltc.AccountCombo.prototype.renderCombo
},{
id: 'date'
,header: _('date')
,width: 125
,dataIndex: 'new_date'
,renderer: function(v) {
if (v == '0000-00-00' || v == '1969-12-31') return '';
return (typeof v == 'string') ? v : v.dateFormat('D M d, Y');
}
,editor: new Ed(new F.DateField({
format: 'D M d, Y'
}))
},{
id: 'checked_in'
,header: _('checked_in')
,width: 100
,dataIndex: 'checked_in'
,editor: new Ed(new F.TextField({
allowBlank: false
}))
,renderer: this.__renderRed
},{
id: 'checked_in'
,header: 'New '+_('checked_in')
,width: 100
,dataIndex: 'new_checked_in'
,editor: new Ed(new F.TextField({
allowBlank: false
}))
,renderer: this.__renderGreen
},{
id: 'checked_out'
,header: 'Old '+_('checked_out')
,width: 100
,dataIndex: 'checked_out'
,editor: new Ed(new F.TextField({
allowBlank: false
}))
,renderer: this.__renderRed
},{
id: 'new_checked_out'
,header: 'New '+_('checked_out')
,width: 100
,dataIndex: 'new_checked_out'
,editor: new Ed(new F.TextField({
allowBlank: false
}))
,renderer: this.__renderGreen
},{
id: 'hours_worked'
,header: _('hours_worked')
,width: 40
,dataIndex: 'new_hours'
},{
id: 'reason'
,header: 'Reason'
,width: 100
,dataIndex: 'reason'
}
]);
}

,__renderRed: function(d,c) {
c.css = 'red';
return d;
}

,__renderGreen: function(d,c) {
c.css = 'green';
return d;
}

,_loadToolbars: function() {
var gF = this.getView().getFooterPanel(true);
var p = new Ext.PagingToolbar(gF,this.store,{
pageSize: 20
,displayInfo: true
,displayMsg: 'Displaying corrections {0} - {1} of {2}'
,emptyMsg: 'No corrections to display'
});

var gH = this.getView().getHeaderPanel(true);
var tb = new Ext.iltc.FilterToolbar(gH,{
store: this.store
});
}
});




Ext.iltc.AccountCombo = function(options,getStore) {
var s = new Ext.data.JsonStore({
url: CONNECTORS_URL+'/account.php'
,baseParams: {
action: 'getSelect'
}
,root: 'results'
,totalProperty: 'total'
,id: 'name'
,fields:['id','name']
});
s.load();
if (getStore === true) return s;

options = options || {};
Ext.applyIf(options,{
store: s
,displayField: options.displayField || 'name'
,valueField: 'id'
,name: 'account'
,hiddenName: 'account'
,emptyText: 'Please select an account...'
,mode: 'local'
,triggerAction: 'all'
,selectOnFocus: false
,editable: false
,allowBlank: false
,listWidth: 300
});
Ext.iltc.AccountCombo.superclass.constructor.call(this,options);
};

Ext.extend(Ext.iltc.AccountCombo,Ext.form.ComboBox,{
renderCombo: (function(){ //singleton pattern used here!
var iS=null;
return function(v){
if(!iS) {
iS=Ext.iltc.AccountCombo(null,true);
}
var a = iS.getById(v);
return a ? a.data.name : v;
};
})()


,editorCombo: function(){
return new Ext.grid.GridEditor(new Ext.iltc.AccountCombo({
lazyRender:true
}));
}
});

[splittingred]

Nevermind, solved. Changed the id param of the JsonStore to point to 'id' instead. Silly me.