Before a month I have posted about "Add header in cfgrid in coldfusion 9" where you can add ExtJs component in header to filter CFGRID data. One of my blog read "David" raise that how to bind ExtJs component with CFGRID to filter result.
Here I will try to explain how to bind header element with CFGRID, assuming that you have already read my previous post regarding this topic.
This is little bit tricky to bind with CFC call. We need to create seperate javascript function which will return value selected from extJS element.[googlead]single_line[/googlead]
In my case I have modifed my CFC to filter artist by state and added state dropdown in CFGRID header.
function getStateValue() { try { return Ext.ComponentMgr.get('cmbstate').value; } catch (e) { return ""; //return default value in case of error. } }
<cfform> <cfgrid format="html" name="artGrid" pagesize="10" selectmode="row" bind="cfc:art.getArtists({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},getStateValue())"> <cfgridcolumn name="ARTISTID" display="No"/> <cfgridcolumn name="FIRSTNAME" header="FIRSTNAME" > <cfgridcolumn name="LASTNAME" header="LASTNAME" > <cfgridcolumn name="CITY" header="CITY" > <cfgridcolumn name="STATE" header="STATE" > </cfgrid> </cfform>
After filtering by state
Hope this help you...