PDA

View Full Version : fireEvent not working in grid



twalker916
14 Jun 2011, 2:22 PM
I have a grid that uses combo boxes in the tbar to filter records and a checkbox that filters based on a batch number if I click on the checkbox the filter works perferctly but if I have a filtered store and I apply a filter from one of the combo boxes or click on a column to sort I use a fireEvent to re-apply the batch number filter on the store. In the code below you will see the fireEvent on line 52 which triggers the listener defined on line 9 which runs the function on line 10 - the odd thing is if I uncomment the alert on line 10 the alert shows up and the filter is applied but with the alert commented out the filter is not applied - I am mystified...

skirtle
14 Jun 2011, 3:55 PM
That is a misuse of events. fireEvent() should be thought of as a protected method and only ever invoked on this. The check event signifies that the checkbox value has changed, which it hasn't. If you want to invoke mRecent() then just invoke mRecent(), don't hijack an event to do it.

Using alert() for debugging is dangerous. It pauses the execution of the current thread and yields control such that other code can execute. JavaScript is normally single-threaded and execution cannot be interrupted until the current code completes: using alert() is an exception to this and can result in a class of race conditions that cannot occur during normal code execution.

I would suggest debugging this using ether breakpoints or console.log() and console.dir() (available in both Firebug and Chrome) in your mRecent() function. Log out values such as this.checked and grid to ensure they have the values you expect. Compare the cases with and without the alert().

Speculating wildly, here's a logical explanation for what you're seeing. Chances are it won't be exactly this but something along the same lines...

You call ColdFusion.Grid.refresh('IJGrid'); then r1.fireEvent("check");.
Without the alert(), mRecent() runs immediately and grid is either undefined or is pointing at a different grid.
In the case with the alert(), execution pauses at the start of mRecent(), allowing other code to run. Let's assume refresh('IJGrid') causes some form of deferred render. If, for example, this invokes your gridRender() function it will assign a value to grid, ready to be used by mRecent() when the user clicks the OK button.


HTH

twalker916
14 Jun 2011, 7:19 PM
You are probably right. The first thing I tried was calling mRecent() but that did not work so I tried the fireEvent - I just happened to put the alert in to make sure something was happening and it caused the filter to work. Do you think putting a delay in after the grid refresh before calling mRecent() would work? Is there a way to know programatically when the refresh has finished? Your help is appreciated.

skirtle
16 Jun 2011, 12:25 PM
Do you think putting a delay in after the grid refresh before calling mRecent() would work?

It might but it's essential that you don't make any further changes without first understanding the problem. Insert breakpoints or logging into mRecent() and establish exactly what the difference is between the cases with and without the alert(). Once you understand why it isn't working you can start thinking about a solution. A delay is unlikely to be the best solution, even if it works. Adding delays would effectively make that code asynchronous and that can often cascade out, forcing you to add delays elsewhere.

twalker916
16 Jun 2011, 1:58 PM
I moved the function into the checkbox def as a handler and did put breakpoints in both the combo box routines and the handler code. When I have a breakpoint in the combo box it works as expected but when I remove it the checkbox handler is never invoked...
the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<cfquery datasource="memberwebdb" name="getfn">select distinct thiscounty = [county] from cdph5 order by [county]</cfquery>
<cfquery datasource="memberwebdb" name="getdo">select distinct thisdo = [cdph district office] from cdph5 order by [cdph district office]</cfquery>
<cfquery datasource="memberwebdb" name="getevt">select distinct thisEvent = [Event Type] from cdph5 order by [Event Type]</cfquery>
<cfquery datasource="memberwebdb" name="getpenalty">select distinct thisPenalty = penalty2 from cdph5 order by penalty2</cfquery>
<cfquery datasource="memberwebdb" name="getdays">select distinct thisDays = days2 from cdph5 order by days2</cfquery>
<cfset county="">
<cfoutput query="getfn">
<cfif currentrow eq 1>
<cfset county="['" & #preservesinglequotes(thiscounty)# & "','" & #preservesinglequotes(thiscounty)# & "']">
<cfelse>
<cfset county=#county# & ",['" & #preservesinglequotes(thiscounty)# & "','" & #preservesinglequotes(thiscounty)# & "']">
</cfif>
</cfoutput>
<cfset districtOffice="">
<cfoutput query="getdo">
<cfif currentrow eq 1>
<cfset districtOffice="['" & #preservesinglequotes(thisdo)# & "','" & #preservesinglequotes(thisdo)# & "']">
<cfelse>
<cfset districtOffice=#districtOffice# & ",['" & #preservesinglequotes(thisdo)# & "','" & #preservesinglequotes(thisdo)# & "']">
</cfif>
</cfoutput>
<cfset eventType="">
<cfoutput query="getevt">
<cfif currentrow eq 1>
<cfset eventType="['" & #preservesinglequotes(thisEvent)# & "','" & #preservesinglequotes(thisEvent)# & "']">
<cfelse>
<cfset eventType=#eventType# & ",['" & #preservesinglequotes(thisEvent)# & "','" & #preservesinglequotes(thisEvent)# & "']">
</cfif>
</cfoutput>
<cfset penalty="">
<cfoutput query="getpenalty">
<cfif currentrow eq 1>
<cfset penalty="['" & #preservesinglequotes(thisPenalty)# & "','" & #preservesinglequotes(thisPenalty)# & "']">
<cfelse>
<cfset penalty=#penalty# & ",['" & #preservesinglequotes(thisPenalty)# & "','" & #preservesinglequotes(thisPenalty)# & "']">
</cfif>
</cfoutput>
<cfset days="">
<cfoutput query="getdays">
<cfif currentrow eq 1>
<cfset days="['" & #preservesinglequotes(thisDays)# & "','" & #preservesinglequotes(thisDays)# & "']">
<cfelse>
<cfset days=#days# & ",['" & #preservesinglequotes(thisDays)# & "','" & #preservesinglequotes(thisDays)# & "']">
</cfif>
</cfoutput>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CDPH 2567 Public Reports</title>
<link rel="stylesheet" type="text/css" href="cdph.css" />
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="shared/examples.css" />
<style type="text/css">
.x-panel-mc {
font-size: 12px;
line-height: 18px;
}
div{
white-space: normal;
}
.dtpl{
padding: 5px;
}
</style>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript" src="tw4.js"></script>
<script type="text/javascript">
var oMostRecent = new Ext.form.Checkbox
(
{
boxLabel: 'Show Most Recent',
id: 'idmr',
name: 'mr',
value: false,
checked: false,
handler: function mostRecent()
{
if(this.checked)
{
grid.store.filterBy(function(record,id){return record.get('BATCH')==3;});
}
else
{
grid.store.clearFilter();
}
}
}
);
var gridRender = function()
{
grid = ColdFusion.Grid.getGridObject('IJGrid');
grid.getSelectionModel().on("rowselect",function(sm,idx,row){
var city = row.data.CITY;
var detail = Ext.getCmp('detail-panel');
detail.update(row.data);
});
var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
var cmbcounty = new Ext.form.ComboBox(
{
id:"cmbcounty",
emptyText:"County",
mode:"local",
width:100,
listWidth:300,
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({fields:["value","text"],data:[<cfoutput>#county#</cfoutput>]})
});
var cmbdo = new Ext.form.ComboBox
(
{
id:"cmbdo",
emptyText:"District Office",
mode:"local",
width:100,
listWidth:300,
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({fields:["value","text"],data:[<cfoutput>#districtOffice#</cfoutput>]})
});
var cmbevent = new Ext.form.ComboBox
(
{
id:"cmbevent",
emptyText:"Event Type",
mode:"local",
width:100,
listWidth:300,
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({fields: ["value","text"],data:[<cfoutput>#eventType#</cfoutput>]})
}
);
var cmbdays = new Ext.form.ComboBox
(
{
id:"cmbdays",
emptyText:"Days",
mode:"local",
width:100,
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({fields:["value","text"],data:[<cfoutput>#days#</cfoutput>]})
}
);
var cmbpenalty = new Ext.form.ComboBox
(
{
id:"cmbpenalty",
emptyText:"Penalty",
mode:"local",
width:100,
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({fields:["value","text"],data:[<cfoutput>#penalty#</cfoutput>]})
}
);
cmbcounty.addListener("select",goCounty);
function goCounty(e)
{
var vmr = oMostRecent.checked;
oMostRecent.setValue(false);
cmbdo.value="";cmbdo.selectedIndex=-1;cmbdo.setValue("");
cmbevent.value="";cmbevent.selectedIndex=-1;cmbevent.setValue("");
cmbdays.value="";cmbdays.selectedIndex=-1;cmbdays.setValue("");
cmbpenalty.value="";cmbpenalty.selectedIndex=-1;cmbpenalty.setValue("");
ColdFusion.Grid.refresh('IJGrid');
oMostRecent.setValue(vmr);
}
cmbdo.addListener("select",gocmbdo);
function gocmbdo(e)
{
var vmr = oMostRecent.checked;
oMostRecent.setValue(false);
cmbcounty.value="";cmbcounty.selectedIndex=-1;cmbcounty.setValue("");
cmbevent.value="";cmbevent.selectedIndex=-1;cmbevent.setValue("");
cmbdays.value="";cmbdays.selectedIndex=-1;cmbdays.setValue("");
cmbpenalty.value="";cmbpenalty.selectedIndex=-1;cmbpenalty.setValue("");
ColdFusion.Grid.refresh('IJGrid');
oMostRecent.setValue(vmr);
}
cmbevent.addListener("select",goEvent);
function goEvent(e)
{
var vmr = oMostRecent.checked;
oMostRecent.setValue(false);
cmbdo.value="";cmbdo.selectedIndex=-1;cmbdo.setValue("");
cmbcounty.value="";cmbcounty.selectedIndex=-1;cmbcounty.setValue("");
cmbdays.value="";cmbdays.selectedIndex=-1;cmbdays.setValue("");
cmbpenalty.value="";cmbpenalty.selectedIndex=-1;cmbpenalty.setValue("");
ColdFusion.Grid.refresh('IJGrid');
oMostRecent.setValue(vmr);
}
cmbpenalty.addListener("select",goPenalty);
function goPenalty(e)
{
var vmr = oMostRecent.checked;
oMostRecent.setValue(false);
cmbdo.value="";cmbdo.selectedIndex=-1;cmbdo.setValue("");
cmbcounty.value="";cmbcounty.selectedIndex=-1;cmbcounty.setValue("");
cmbdays.value="";cmbdays.selectedIndex=-1;cmbdays.setValue("");
cmbevent.value="";cmbevent.selectedIndex=-1;cmbevent.setValue("");
ColdFusion.Grid.refresh('IJGrid');
oMostRecent.setValue(vmr);
}
cmbdays.addListener("select",goDays);
function goDays(e)
{
var vmr = oMostRecent.checked;
oMostRecent.setValue(false);
cmbdo.value="";cmbdo.selectedIndex=-1;cmbdo.setValue("");
cmbcounty.value="";cmbcounty.selectedIndex=-1;cmbcounty.setValue("");
cmbpenalty.value="";cmbpenalty.selectedIndex=-1;cmbpenalty.setValue("");
cmbevent.value="";cmbevent.selectedIndex=-1;cmbevent.setValue("");
ColdFusion.Grid.refresh('IJGrid');
oMostRecent.setValue(vmr);
}
var tbar=Ext.DomHelper.insertFirst(grid.el,{tag:'div',id:Ext.id()},true);
var gtbar = new Ext.Toolbar
(
{
renderTo: tbar,items:
[
{text:"&nbsp;",cls:"x-btn-text"},
oMostRecent,
{xtype: 'tbseparator'},
cmbdo,'-',
cmbcounty,'-' ,
cmbevent,'-' ,
cmbdays,'-' ,
cmbpenalty,'-' ,
{
text:"Click to Clear Filters",cls:"x-btn-text",
tooltip:"Show all rows",
handler: function()
{
var vmr = oMostRecent.checked;
oMostRecent.setValue(false);
cmbcounty.value="";cmbcounty.selectedIndex=-1;cmbcounty.setValue("");
cmbdo.value="";cmbdo.selectedIndex=-1;cmbdo.setValue("");
cmbevent.value="";cmbevent.selectedIndex=-1;cmbevent.setValue("");
cmbdays.value="";cmbdays.selectedIndex=-1;cmbdays.setValue("");
cmbpenalty.value="";cmbpenalty.selectedIndex=-1;cmbpenalty.setValue("");
ColdFusion.Grid.refresh('IJGrid');
oMostRecent.setValue(vmr);
}
}
]
}
);
grid.addListener("headerclick",toggleMR);
function toggleMR()
{
var vmr = oMostRecent.checked;
ColdFusion.Grid.refresh('IJGrid');
oMostRecent.setValue(vmr);
}
var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
var gbbar = new Ext.PagingToolbar
(
{
renderTo:bbar,
store: grid.store,
pageSize: 200,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
emptyMsg: "<b>No Record</b>" ,
style: "text-align='left'"
}
);
};
function getCountyValue()
{
try{return Ext.ComponentMgr.get('cmbcounty').value;} catch (e){return "";}
}
function getDistrictOfficeValue()
{
try{return Ext.ComponentMgr.get('cmbdo').value;} catch (e){return "";}
}
function getEventValue()
{
try{return Ext.ComponentMgr.get('cmbevent').value;} catch (e){return "";}
}
function getPenaltyValue()
{
try{return Ext.ComponentMgr.get('cmbpenalty').value;} catch (e){return "";}
}
function getDaysValue()
{
try{return Ext.ComponentMgr.get('cmbdays').value;} catch (e){return "";}
}
</script>
</head>
<body>
<cfscript>
ormreload();
cdphdata = EntityLoad("cdpht4");
</cfscript>
<img src="../images/banner2.gif" />
<h1>California Department of Public Health 2567 Public Reports</h1>
<p style="vertical-align:middle;"><img src="../images/bullet.png" align="bottom" />State Enforcement Actions - Quick Summary</p>
<table cellspacing="3" width="762">
<tr><td>
Each row below provides details of an administrative penalty imposed between October 2007 and November 2010.
Click on a row to see additional details displayed below the table. The data can be sorted by clicking on a column heading.
To narrow the data display, select an option from one of the drop-downs. To search for a word, phrase or number, press Ctrl-F.
To view additional data, go to <a href="cdphgrid.cfm">Full Detail</a>
</td></tr>
</table>
<cfform name="formIJGrid">
<cfgrid selectmode="ROW" sort="Yes"
title="Immediate Jepoardy Penalty Issued"
name="IJGrid"
collapsible="false"
width="980"
height="400"
pagesize="200"
autowidth="yes"
format="html"
colheaderbold="false"
colheaderfont="Verdana"
colheaderalign="left"
colheaders="yes"
selectOnLoad="false"
font="Verdana"
rowheaders="yes"
striperows="false"
striperowcolor="##F0FAFF"
bind="cfc:cdphdatat4.getCDPHt4({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},getCountyValue(),getDistrictOfficeValue(),getEventValue(),getPenaltyValue(),getDaysValue())" >
<cfgridcolumn name="ijid" header="RecordID" dataalign="LEFT" display="No">
<cfgridcolumn name="DistrictOffice" header="CDPH District Office" width="200">
<cfgridcolumn name="County" header="County">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="EventType" header="Event Type" width="200">
<cfgridcolumn name="days2" header="Days" dataalign="center" width="50">
<cfgridcolumn name="Penalty2" header="Penalty" width="60">
<cfgridcolumn name="Hospital" header="Hospital">
<cfgridcolumn name="Batch" header="Batch" width="30" display="No">
</cfgrid>
</cfform>
<cfset ajaxOnLoad("gridRender")>
<div id="ijtpl"></div>
</body>
</html>

skirtle
16 Jun 2011, 2:36 PM
Please use code tags when posting code.

Try changing your checkbox handler to this:


handler: function() {
console.log('Entering checkbox handler');
console.log('this is:');
console.dir(this);
console.log('this.checked: ' + this.checked);
console.log('grid is:');
console.dir(grid);

if (this.checked) {
console.log('Entered true case');
grid.store.filterBy(function(record,id){return record.get('BATCH')==3;});
console.log('Finished true case');
}
else {
console.log('Entered false case');
grid.store.clearFilter();
console.log('Finished false case');
}

console.log('Leaving checkbox handler');
}

If you run it with this logging in either Firefox+Firebug or Chrome you should pretty quickly be able to see what is going wrong.

twalker916
17 Jun 2011, 3:32 PM
I put the code in (thanks for that) and it looks like it is going through the routine correctly but the filter is never applied. And a strange thing I found out is that the "alert" trick only works in IE. It may be because it is cfgrid and I have Coldfusion 8. I am out of ideas - maybe it will work when I upgrade to version 4 of xjs or version 9 of cf. Thanks for your help.

twalker916
1 Jul 2011, 9:01 AM
You were right and the way to fix it is by using something like the following:
store.on('load', function() {
oMostRecent.checked;
}, null, {single: true});
in the listeners on the select box filters - again, thanks for your help