I was working on migration from ColdFusion 8 to ColdFusion 9 for one my client. As I have raised in my other post that Coldfusion 9 is using Ext 3.0 which required some javascript changes if you have used ExtJs function to extend your functionality.
I need to show record information (ex. Showing 1 to 10 out of 15) in CFGRID footer but as usual I require to make changes as per ExtJs version 3.0.
Below is code snippet to show record information in footer.
<html>
<head>
<script type="text/javascript">
var gridRender = function()
{
grid = ColdFusion.Grid.getGridObject('artGrid'); //Get grid object
//overwrite existing grid footer with new div, Ext.id() will assign unique id to footer
var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
//Create new PaginToolbar and render it to bbar (grid footer)
gbbar = new Ext.PagingToolbar({
renderTo:bbar,
store: grid.store,
pageSize: 10,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
emptyMsg: "<b>No Record</b>"
});
};
</script>
</head>
<body>
<cfform>
<cfgrid format="html" name="artGrid" pagesize="10" selectmode="row"
bind="cfc:test.art.getArtists({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
<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>
<cfset ajaxOnLoad("gridRender")>
</body>
</html>
Call gridRender function using ajaxOnLoad to modify existing grid footer.
var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
Above statement will remove existing grid footer with blank div.
gbbar = new Ext.PagingToolbar({
renderTo:bbar,
store: grid.store,
pageSize: 10,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
emptyMsg: "<b>No Record</b>"
});
Now create new Paging toolbar using Ext.PaginToolbar class and set displayinfo to true and in displayMsg will use to display record information on grid.
numbers will be replaced with record information.
{0} : record number for first record on page.
{1} : record number for last record on page.
{2} : total number of records.
And here is output. Sorry guys I cann't show you live examples as current host provide coldfusion 8, but Click here to download code.
Jul 29, 2010 9:29 PM
Apr 28, 2010 at 1:58 PM Awesome, thanks!
May 17, 2010 at 10:53 AM Any way to just remove paging from the grid, but still show all the records with a down scroll?
I need select something in a cfselect box, and pass that value to the cfgrid so I can filter the grid based around the value...can pass the value using a bind, but for an html grid, that keeps the paging. If I use query attribute, not sure how to pass data to that query.
any help?
thanks
dan
May 18, 2010 at 4:18 AM @Dan,
As you used query attribute it will create array of query as datastore for grid so you can easily filter using filterby function of Ext.store object.
Below is sample code for filterby function
grid.store.data = gridData.filterBy(function (record,index)
{
return record.get([column name]) == [value of filter field];
},grid);
filterby function call for all row in data store and only keep those row for which function return true value.
At last you need to reconfigure your grid using below statement
grid.reconfigure(grid.store,grid.colModel);
Try this .. If do not get success let me know I will post in my blog.
May 20, 2010 at 4:19 PM It works fine but I am getting a Javascript error saying 'Object Required' line 8 in IE7.
May 21, 2010 at 12:27 PM @Rafi,
Even I got same error but I have ignored it as it wasn't affecting anywhere else. I will look into it whenever I get some time.