Combobox Renderers Not working on EditableGrid Store Reload

[Monk_18]

Hello All,
I'm verry new to extjs and am trying to create a very simple editablegrid that has mostly static stores to comboboxes all related to a dynamic store of rows... Basically I am having an issue when I update, I clear the main dynamic store and requerry the results... however the issue comes when I reload the store the comboboxes renderer doesn't appear to fire and show the text vs. value for the grid cells (cm renderer)... this appears to only happen on the entry of a new row, edits to existing cells appear correct. If someone could please give me some direction it would be greatly appreciated...

my code is mostly a compilation of examples and forum help so any help that leads to better understanding of extjs is appreciated...

Please note the page is created with simple coldfusion and preloads a filter type form that creates a window (containing the editable grid)

I will post the majority of the code bleow...

<script
type='text/javascript'>


Ext
.onReady(function(){

<!--- fixes --->

Ext
.override(Ext.grid.GridView, {
syncFocusEl : Ext.emptyFn
});

var fields = [
{name:'key', type:'string'},
{name:'value', type:'string'}
];

var storerecord = Ext.data.Record.create(fields);
var datetogo ='3/15/2009';

var byJobFilter = [["0","Filter By Job..."],<cfoutput><cfloopquery="getChargeFilter">["#chgCode#","#chgCode#"],</cfloop></cfoutput>["",""]];
var byLocFilter = [["0","Filter By Location..."],<cfoutput><cfloopquery="getLocFilter">["#locKey#","#locName#"],</cfloop></cfoutput>["",""]];
var byDeptFilter = [["0","Filter By Department..."],<cfoutput><cfloopquery="getDeptFilter">["#deptKey#","#department#"],</cfloop></cfoutput>["",""]];
var byTravelerFilter = [["0","Filter By Traveler..."],<cfoutput><cfloopquery="getTravelersFilter">["#empKey#","#empName#"],</cfloop></cfoutput>["",""]];
var byERStatFilter = [["-1","Filter By Expense Report Status..."],["0","No"],["1","Completed"]];
var bycarFilter = [["-1","Filter By Car Rental Status..."],["0","No"],["1","Yes"]];
var bybookedFilter = [["-1","Filter By Booking Status..."],["0","Company"],["1","Self"]];

var byJob =new Ext.data.SimpleStore({
fields: fields,
data: [<cfoutput><cfloopquery="getChargeCodes">["#SELECTTEXT#",<cfif SELECTTEXT IS"0000">"Overhead"<cfelse>"#SELECTTEXT#"</cfif>],</cfloop>["",""]</cfoutput>]
});

var byLoc =new Ext.data.SimpleStore({
fields: fields,
data: [<cfoutput><cfloopquery="getLocations">["~#Key#~","#Value#"],</cfloop>["~0~",""]</cfoutput>]
});

var byTraveler =new Ext.data.SimpleStore({
fields: fields,
data: [<cfoutput><cfloopquery="getTravelers">["~#Key#~","#Value#"],</cfloop>["~0~",""]</cfoutput>]
});

var byStates =new Ext.data.SimpleStore({
fields: fields,
data: [<cfoutput><cfloopquery="getStates">["#SELECTTEXT#","#SELECTVALUE#"],</cfloop>["",""]</cfoutput>]
});

var byCountries =new Ext.data.SimpleStore({
fields: fields,
data: [<cfoutput><cfloopquery="getCountry">["#SELECTTEXT#","#SELECTVALUE#"],</cfloop>["",""]</cfoutput>]
});

var byCar =new Ext.data.SimpleStore({
fields: fields,
data: [["0","No"],["1","Yes"],["",""]]
});

var byBooked =new Ext.data.SimpleStore({
fields: fields,
data: [["0","Company"],["1","Self"],["",""]]
});

var deleterow =new Ext.data.SimpleStore({
fields: fields,
data: [["","No"],["X","Delete"]]
});

Ext.QuickTips.init();

function formatDate(value){
return value ? value.dateFormat('m/d/y') :'';
};

// shorthand alias

var fm = Ext.form;

// the column model has information about grid columns

var cm =new Ext.grid.ColumnModel([{
id:'pkey',
header:"Primary",
dataIndex:'pkey',
width:10,
hidden:true

},{
id
:'name',
header:"Traveler",
dataIndex:'name',
width:120,
editor:new Ext.form.ComboBox({
typeAhead:true,
store: byTraveler,
mode:'local',
displayField:'value',
valueField:'key',
triggerAction:'all',
lazyRender:true,
lazyInit:false,
listClass:'x-combo-list-small',
emptyText:'Select A Traveler...'

}),
renderer
:function(value){ 
var index = byTraveler.find("key",value,0);
if (index !=-1){
var typeName = byTraveler.getAt(index).get("value"); 
return typeName ? typeName :'Select A Traveler...';}
else

{
if (value !="")
return value;
else

return'Select A Traveler...';}
} 
},{
id:'project',
header:"ChargeCode",
dataIndex:'project',
width:100,
editor:new Ext.form.ComboBox({
typeAhead:true,
store: byJob,
mode:'local',
displayField:'value',
valueField:'key',
triggerAction:'all',
lazyRender:true,
lazyInit:false,
listClass:'x-combo-list-small',
emptyText:'Select A Job...'

}),
renderer
:function(value){ 
if (value =="0000"|| value =="")
return'OverHead';
else

return value;
}
},{
id:'departdt',
header:"Departure Date",
dataIndex:'departdt',
width:110,
renderer: formatDate,
editor:new fm.DateField({
format:'m/d/y',
minValue:'01/01/05'

})
},{
id
:'returndt',
header:"Return Date",
dataIndex:'returndt',
width:110,
renderer: formatDate,
editor:new fm.DateField({
format:'m/d/y',
minValue:'01/01/05'

})
},{
id
:'location',
header:"Destination",
dataIndex:'location',
width:120,
editor:new Ext.form.ComboBox({
typeAhead:true,
store: byLoc,
mode:'local',
displayField:'value',
valueField:'key',
triggerAction:'all',
lazyRender:true,
lazyInit:false,
listClass:'x-combo-list-small',
emptyText:'Select A Destination...'

}),
renderer
:function(value){ 
var index = byLoc.find("key",value,0);
if (index !=-1){
var typeName = byLoc.getAt(index).get("value"); 
return typeName ? typeName :'Select A Destination...';}
else

{
if (value !="")
return value;
else

return'Select A Destination...';}
}
},{
id:'car',
header:"Car Rental",
dataIndex:'car',
width:65,
editor:new Ext.form.ComboBox({
typeAhead:true,
store: byCar,
mode:'local',
displayField:'value',
valueField:'key',
triggerAction:'all',
lazyRender:true,
lazyInit:false,
listClass:'x-combo-list-small',
emptyText:'Select A Car Rental Status...'

}),
renderer
:function(value){ 
if (value ==""|| value ==0)
return"No";
else

return"Yes";
}
},{
id:'booked',
header:"Booked By",
dataIndex:'booked',
width:65,
editor:new Ext.form.ComboBox({
typeAhead:true,
store: byBooked,
mode:'local',
displayField:'value',
valueField:'key',
triggerAction:'all',
lazyRender:true,
lazyInit:false,
listClass:'x-combo-list-small',
emptyText:'Select A Booking Status...'

}),
renderer
:function(value){ 
if (value ==""|| value ==0)
return"Company";
else

return"Self";
}
},{
id:'note',
header:"Note",
dataIndex:'note',
width:200,
editor:new fm.TextField({
allowBlank:true

})
},{
id
:'deleter',
header:"Delete?",
dataIndex:'deleter',
width:50,
editor:new Ext.form.ComboBox({
typeAhead:true,
store: deleterow,
mode:'local',
displayField:'value',
valueField:'key',
triggerAction:'all',
lazyRender:true,
lazyInit:false,
listClass:'x-combo-list-small'

}),
renderer
:function(value){ 
if (value =="X")
return"Delete";
else

return"";
},
hidden:true

} 
]);

// Form panel For Filters...

var simple =new Ext.FormPanel({
labelAlign:'right',
align:'center',
frame:true,
title:'Query Form',
header:false,
width:600,
autoHeight:true,
listeners: {activate:function(){disablegrid();}},
items: [{
layout:'column',
title:'Please Select Date Ranges and Filters as Necessary, then Click Go...',
items:[{
columnWidth:.5,
layout:'form',
align:'center',
items: [{
xtype:'label',
autoWidth:true,
height:40,
html: '<BR>Select Date Range For Report<BR>'

},{
xtype
:'datefield',
labelWidth:'10%',
fieldLabel:'Starts After',
name:'dateFrom',
id:'dateFrom',
anchor:'90%',
labelPad:0

},{
xtype
:'datefield',
labelWidth:'10%',
fieldLabel:'Ends Prior To',
name:'dateTo',
id:'dateTo',
anchor:'90%',
labelPad:0

}]
},{
columnWidth:
.5,
layout:'form',
items: [{
xtype:'label',
autoWidth:true,
height:40,
html: '<BR>Select Filters to Apply to the Report<BR>'

},{
xtype
:'combo',
hideLabel:true,
store: byJobFilter,
typeAhead:true,
mode:'local',
triggerAction:'all',
emptyText:'Filter By Job...',
selectOnFocus:true,
name:'jobFilter',
id:'jobFilter',
anchor:'90%'

},{
xtype
:'combo',
hideLabel:true,
store: byLocFilter,
typeAhead:true,
mode:'local',
triggerAction:'all',
emptyText:'Filter By Location...',
selectOnFocus:true,
name:'locFilter',
id:'locFilter',
anchor:'90%'

},{
xtype
:'combo',
hideLabel:true,
store: byDeptFilter,
typeAhead:true,
mode:'local',
triggerAction:'all',
emptyText:'Filter By Department...',
selectOnFocus:true,
name:'dptFilter',
id:'dptFilter',
anchor:'90%'

},{
xtype
:'combo',
hideLabel:true,
store: byTravelerFilter,
typeAhead:true,
mode:'local',
triggerAction:'all',
emptyText:'Filter By Traveler...',
selectOnFocus:true,
name:'empFilter',
id:'empFilter',
anchor:'90%'

},{
xtype
:'combo',
hideLabel:true,
store: byERStatFilter,
typeAhead:true,
mode:'local',
triggerAction:'all',
emptyText:'Filter By Expense Report Status...',
selectOnFocus:true,
name:'expRptFilter',
id:'expRptFilter',
anchor:'90%'

},{
xtype
:'combo',
hideLabel:true,
store: bycarFilter,
typeAhead:true,
mode:'local',
triggerAction:'all',
emptyText:'Filter By Car Rental Status...',
selectOnFocus:true,
name:'carFilter',
id:'carFilter',
anchor:'90%'

},{
xtype
:'combo',
hideLabel:true,
store: bybookedFilter,
typeAhead:true,
mode:'local',
triggerAction:'all',
emptyText:'Filter By Booking Status...',
selectOnFocus:true,
name:'bookingFilter',
id:'bookingFilter',
anchor:'90%'

}]
}]
}],
buttons
:[{
text :'Go',
id :'Go',
handler :function(){
// remove the store...

store
.removeAll();
// run the store with passed parameters....

if (Ext.getCmp("dateFrom").getValue() !='')
var dtfr = Ext.getCmp("dateFrom").getValue().format("m/d/Y");
else

var dtfr ='';
if (Ext.getCmp("dateTo").getValue() !='')
var dtto = Ext.getCmp("dateTo").getValue().format("m/d/Y");
else

var dtto ='';
store.reload({
params: {
dateFrom: dtfr,
dateTo: dtto, 
jobFilter: Ext.getCmp("jobFilter").getValue(),
locFilter: Ext.getCmp("locFilter").getValue(),
dptFilter: Ext.getCmp("dptFilter").getValue(),
empFilter: Ext.getCmp("empFilter").getValue(), 
expRptFilter: Ext.getCmp("expRptFilter").getValue(),
carFilter: Ext.getCmp("carFilter").getValue(),
bookingFilter: Ext.getCmp("bookingFilter").getValue()
}
});
grid.doLayout();
grid.render();
win.show();
} 
},{
text :'Reset',
handler :function(){
// remove the store...

store
.removeAll();
// clear all form fields...

simple
.form.reset();
}
}]
});

// create access to the form fields and set base values...

Ext
.getCmp("jobFilter").setValue(0);
Ext.getCmp("locFilter").setValue(0);
Ext.getCmp("dptFilter").setValue(0);
Ext.getCmp("empFilter").setValue(0);
Ext.getCmp("carFilter").setValue(-1);
Ext.getCmp("bookingFilter").setValue(-1);
Ext.getCmp("expRptFilter").setValue(-1);
<cfoutput>

<cfif SESSION.isAdmin>

Ext
.getCmp("dateFrom").setValue('#DateFormat(DateAdd('w',-2,Now()),'MM/DD/YYYY')#');
<cfelse>

Ext
.getCmp("dateFrom").setValue('');
</cfif>

</cfoutput>

Ext
.getCmp("dateTo").setValue('');


// by default columns are sortable

cm
.defaultSortable =true;

// tick record creation for 

// type so we can add records dynamically

var ticket = Ext.data.Record.create([
{id:'pkey', name:'pkey', type:'int'},
{id:'name', name:'name', type:'string', sortType: cm.lookup.name.renderer, renderer: cm.lookup.name.renderer},
{id:'project', name:'project', type:'string', sortType: cm.lookup.project.renderer, renderer: cm.lookup.project.renderer},
{id:'departdt', name:'departdt', type:'date', dateFormat:'m/d/Y'},
{id:'returndt', name:'returndt', type:'date', dateFormat:'m/d/Y'}, 
{id:'location', name:'location', type:'string', sortType: cm.lookup.location.renderer, renderer: cm.lookup.location.renderer},
{id:'car', name:'car', type:'string', renderer: cm.lookup.car.renderer},
{id:'booked', name:'booked', type:'string', renderer: cm.lookup.booked.renderer},
{id:'note', name:'note', type:'string'},
{id:'deleter', name:'deleter', type:'string', renderer: cm.lookup.deleter.renderer}
]);

// create the Data Store

var store =new Ext.data.Store({
url:'travelspryproxy.cfm',
baseParams: {dostep:5},
pruneModifiedRecords :true,
// the return will be XML, so lets set up a reader

reader
:new Ext.data.XmlReader({
record:'traveler'

}, ticket)
});

// create the editor grid

var grid =new Ext.grid.EditorGridPanel({
region:'center',
layout:'fit',
store: store,
deferRowRender:false,
cm: cm,
width:900,
autoWidth:true,
autoShow:false,
height:300,
frame:false,
clicksToEdit:1,
autoExpandColumn:'project'

});

//function to update the dirty grid fields...

fireChanges 
=function(){
var data = [];
Ext.each(grid.getStore().getModifiedRecords(), function(record){
data.push(record.data);
});
store.removeAll();
Ext.Ajax.request({
url:'commonFunctions.cfc?method=updateTravelfromGrid',
params: {data: Ext.encode(data)},
success:function(){
store.reload();
},
failure:function(){
store.reload();
}
});
//grid.doLayout();

grid
.render();
}

//define toolbar area..

var tb = grid.getTopToolbar();

//grid listeners..

grid
.on('afteredit', function(e) {
// make sure dirty turns that save button on... later

});

//the window...

var win =new Ext.Window({
title :'Add/Edit Travelers Spanning the given Date',
closable :true,
closeAction:'hide',
modal :true,
width :950,
height :450,
plain :true,
layout :'border',
items : grid,
buttons : [{
name:'AddBtn',
id:'AddBtn',
text:'Add A Travel Record',
xtype:'button',
handler :function(){
var tick =new ticket({
pkey:0,
name:"",
project:"",
departdt:new Date(datetogo),
returndt:new Date(datetogo),
location:"",
car:"",
booked:"",
note:"",
deleter:""

});
store
.insert(store.getTotalCount(), tick);
}
},{
name:'SaveBtn',
id:'SaveBtn',
text:'Save Changes to Travel Records',
xtype:'button',
handler :function(){
fireChanges();
}
},{
name:'LocBtn',
id:'LocBtn',
text:'Add a Location',
xtype:'button',
handler :function(){
locadd.show();
}
}]
});

// add window listeners...

win
.on('hide', function() {
store.removeAll();
});

// window call to load store and show window for given date...

fireAdd 
=function( dateval )
{
datetogo = dateval;
store.reload();
grid.doLayout();
grid.render();
win.setTitle('Add/Edit Travelers Spanning the Date: '+ dateval);
win.show();
}

//the window...

var locadd =new Ext.Window({
title :'Add a New Location',
closable :true,
closeAction:'hide',
modal :true,
width :400,
height :300,
plain :true,
items: [ new Ext.FormPanel({
frame:true,
id:'locform',
name:'locform',
fileUpload:true,
autoHeight:true,
defaultType:'textfield',
labelWidth :120,
items: [{
fieldLabel:'Name',
name:'name',
width:190

}, {
fieldLabel
:'Address',
name:'address',
width:190

}, {
fieldLabel
:'Address (Contd.)',
name:'address2',
width:190

}, {
fieldLabel
:'City',
name:'city',
//vtype:'city',

width
:190

},
new Ext.form.ComboBox({
fieldLabel:'State',
hiddenName:'state',
store: byStates,
valueField:'value',
displayField:'key',
typeAhead:true,
mode:'local',
triggerAction:'all',
emptyText:'Select a state...',
selectOnFocus:true,
width:190

}), {
fieldLabel
:'Zip',
name:'zip',
width:190

},
new Ext.form.ComboBox({
fieldLabel:'Country',
hiddenName:'Country',
store: byCountries,
valueField:'value',
displayField:'key',
typeAhead:true,
mode:'local',
triggerAction:'all',
emptyText:'Select a County...',
selectOnFocus:true,
width:190

}), {
fieldLabel
:'Contact name',
name:'contact',
width:190

}, {
fieldLabel
:'Contact EMail',
name:'contactmail',
vtype:'email',
width:190

}, {
fieldLabel
:'Contact Phone',
name:'contactphone',
width:190

}
]
})
],
buttons
: [{
text :'Submit',
disabled :false,
handler :function(){
fireLocation();
}
},{
text :'Close',
handler :function(){
locadd.hide();
}
}]
});

//function to update the dirty grid fields...

fireLocation 
=function(){
// get the from values... if all blank skip...

var formstuff = Ext.getCmp('locform');
var data = formstuff.form.getValues();
//alert(data);

Ext
.Ajax.request({
url:'commonFunctions.cfc?method=insertLocation',
params: {data: Ext.encode(data)},
success:function(param1, param2){
//add to store....

var jsonret = Ext.decode(param1.responseText);
var thevalue = jsonret.VALUE;
var thekey ='~'+ jsonret.KEY +'~';
byLoc.addSorted([new storerecord({key:thekey, value:thevalue})]);
//close window....

locadd
.hide();
},
failure:function(){
//alert('failure');

//close window....

locadd
.hide();
}
});
}

//final setup stuff

//render the extjs to the page

simple
.render('TheQuery');

//if admin go ahead and fire the defaluts

<cfoutput>

<cfif SESSION.isAdmin>

store
.load({
params : {
dateFrom:'#DateFormat(DateAdd('w',-2,Now()),'MM/DD/YYYY')#' 
}
});
win.show();
</cfif>

</cfoutput>


});
</script>

[Monk_18]

I may have found my issue... I will close the thread as soon as I verify,... My Ajax request that reloads the store was not completing proir to the grid.render()... the render needed to be inside the success and failure functions after the store reload...

[Monk_18]

I was incorrect... reloading the store after and update causes the ColumnModel Renerer to not run... Really not sure what to do here... any help is appreciated

[Monk_18]

Strange fix but I found it... ON Typeinselect on the Comboboxes the simplestores were being filtered on reload of the dynamic grid the renderers were running but only on the filtered simplestores... If I can figure out how... I will close this thread...