PDA

View Full Version : How do I dynamically add a RowDblClick listener in Ext JS 4 with a cfgrid?



mailalan
13 Sep 2016, 3:47 AM
I am new to Ext JS. My company has just upgraded to ColdFusion 9 from a much older version which means we've also gone from Ext JS 2 to 4.1. This caused some of our old legacy code to break and I'm trying to fix it.

My problem is a listener for a double click on a row is no longer working.

A CFGRID is defined like this:

<cfgrid name="LeadsGrid" bindonload="yes" bind="cfc:LeadsActions.getdata({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{LeadsForm:SearchCriteria},{LeadsForm:ArchiveType},{LeadsForm:UID},{LeadsForm:OnlyNew})"
format="html" autoWidth="yes" vspace="0" hspace="0" width="#gridWidth#" height="#gridHeight#" pagesize="50" selectMode="row" onchange="cfc:LeadsActions.editlead({cfgridaction},{cfgridrow},{cfgridchanged})" fontsize="11px" colheaderfontsize="11px" font="Arial, Helvetica, sans-serif" colheaderfont="Arial, Helvetica, sans-serif" bold="no">
<cfgridcolumn name="ID" header="ID" display="no" select="no"/>
<cfgridcolumn name="leadActionDesc" header="Lead Action" display="yes" select="no"/>
<cfgridcolumn name="Status" select="no" display="yes" header="Status"/>
<cfgridcolumn mask="m/d/y" type="date" name="NextActionDate" header="Next Action Date" select="no"/><!--- JUP0000639 - Emery Geyer --->
<cfgridcolumn name="Name" header="Name"/>
<cfgridcolumn name="PhoneNumber" header="Phone Number" display="yes"/>
<cfgridcolumn name="AssignedTo" header="Assigned To" select="no"/>
<cfgridcolumn mask="m/d/y h:i:s A" type="date" name="AssignedDate" header="Assigned Date" select="no" display="no"/>
<cfgridcolumn mask="m/d/y h:i:s A" type="date" name="CreatedDate" header="Date Created" select="no"/>
<cfgridcolumn name="Source" header="Source" values="#ValueList(getLeadSources.leadSourceDesc)#" valuesdisplay="#ValueList(getLeadSources.leadSourceDesc)#"/>
<cfgridcolumn name="Campaign" header="Campaign" values="#ValueList(getLeadCampaigns.leadCampaignDesc)#" valuesdisplay="#ValueList(getLeadCampaigns.leadCampaignDesc)#"/>
<cfgridcolumn name="ProducerName" header="Producer" display="no" />
</cfgrid>

Then a listener is added dynamically:

var grid = ColdFusion.Grid.getGridObject("LeadsGrid");

Ext.grid.addListener("rowdblclick",function(grid,rowIndex,e){
var record = grid.getStore().getAt(rowIndex);
try{
ColdFusion.Window.destroy('ViewLead');
}catch(e){
//ignored because we don't care if it exists or not.
}
var viewHeight = parseInt('#viewHeight#');
ColdFusion.Window.create("ViewLead","View Lead","ViewLead.cfm?leadID=" + record.data.ID,{
modal:true,
center:true,
resizeable:false,
width:'#viewWidth#',
height:viewHeight,
x:0,
y:0,
center:true,
closeable:true,
refreshOnShow:true
});
});

I've searched and searched and tried everything I could find to try. I tried ItemDblClick and DblClick. How can this code be updated to work with JS 4? Thanks for any help!

Gary Schlosberg
13 Sep 2016, 6:48 AM
I don't believe that Ext JS is supported on grids that aren't created by Ext JS.

Jad
13 Sep 2016, 11:45 PM
Hello

See EventObject and EventManager to add an event listener on a dom element

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.EventObject
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.EventManager