May 1
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.
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.
}
}
getStateValue() function will return selected state value from dropdown. You have to put this code in try catch as first grid load browser will not find cmbstate dropdown as it is not created yet. Now you need to bind this function with cfgrid bind attributes.
<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>
If you want to pass argument in this javascript function then it will let you single numeric argument only. CFGRID ultimatly creating javascript code which cause issue if you pass multiple argument or string value in it.
Output without filter:
After filtering by state
Hope this help you...
Feb 04, 2012 1:44 PM
Nov 17, 2010 at 6:50 AM Thanks for your example! Is there any way to take this one step farther and do an onKeyPress on the combobox so that the cfgrid filters as you type? I can get it to work with the Enter key but not on actual keypress.
Feb 25, 2011 at 3:08 PM Will this work in CF8?
Feb 26, 2011 at 3:55 AM Yes binding should work with CF8 as well but you may need to look into getting value from component (ex. Ext.ComponentMgr.get('cmbstate').value). CF9 has higher version of ExtJs which change the syntax.
Mar 1, 2011 at 12:24 PM Your right it does work! thanks..
Tell me what you think about this.. Basically I am making a formulas grid with cfgrid.
I do all the manipulation by going to the Ext side of the grid. My cfgrid is set to selectmode='edit'. Now any change I make to a cell fires an onchange action by default. But this I do not want. I was wondering if there was a simple clean way to turn off this onchange action that occurs in cfgrid edit mode since I will just do what I want from that point in javascript with the Ext gridEditor object. For now I had to set up a temporary cfc that returns nothing to handle stuff like {cfgridpagesize}, {cfgridaction} etc... I haven't been able to find a simple way to turn this off.. Maybe some knows already?
Mar 3, 2011 at 6:13 AM I think this is only reason why I am not using edit mode of cfgrid. I don't think is there any way to do without specifying cfc as without it will give runtime error.
Mar 8, 2011 at 11:07 AM Ok what about this idea..
I am wondering if I can somehow embed cfselects into lets say in a new Ext.LayoutDialog. Like within Ext.ContentPanel within the dialog for example;
centerPanel = new Ext.ContentPanel(etc..)
centerPanel.setContent('<cfoutput><cfform><cfselect name=\'myselect\' bind=\'cfcs:somecfc\'></cfselect></cfform></cfoutput>'); -> ??
For use of bindable cfselects -
any ideas?
Dec 29, 2011 at 3:11 AM Please, does anyone know wether it is possible to extent the context menu of the coloums with a filter in Coldfusion like in this example: http://ccinct.com/lab/filter-grid/
Dec 30, 2011 at 8:21 AM Yes, it will be. I haven't tried it but if you are using latest version of ColdFusion which support ExtJS 3.1.