Here is an example of how to change the pageSize of an AJAX CFFGRID dynamically.

Purpose :-
Let the end user select how many rows of data he/she wants to see in the Grid. (ie technically speaking, change the pageSize on the fly).

Approach :-
1) Add a ComboBoxwith the number of Rows to be selected, for the user to be able to select. use the Ext JS functions to achieve that.
2) Take the value selected from ComboBox and reload the grid data.
3) Reload the paging Toolbar as well because, apparently, the grid data and paging toolbar work independently, reloading the grid does not reload the paging toolbar. So you have to do that manually.
4) Reconfigure the Grid.

Notes :-
Its worth noting that I also made a change to the CFC that gets the data for the grid. The way it works is, if you set the pageSize to lets say 25, and the query returns only 20 rows, the QueryConvertForGrid would still return 25 rows with 5 blank rows. So just a little check in the CFC fixes this.

<cfset var ps = pageSize>
<cfquery name="getArtists" datasource="#this.dsn#">
SELECT *
FROM Artists
<cfif gridsortcolumn neq "" or gridsortdirection neq "">
order by #gridsortcolumn# #gridsortdirection#
</cfif>
</cfquery>
<cfif getArtists.RecordCount LT ps>
<cfset ps = getArtists.RecordCount>
</cfif> >
<cfreturn QueryConvertForGrid(getArtists, page, ps)>

Here is the piece of code that reloads the grid data and updates the paging toolbar.


cb.addListener("select",function(combo,record,index){
// the new pageSize from combobox
var numRows = record.data.value;
// this line forces the grid to reload data with new pageSize
ds.reload({params:{start:0,limit:numRows}});
// the footer paging toolbar still holds old pagesize, so that needs refreshing as well
// Create a new Paging Toolbar
var paging = new Ext.PagingToolbar(gridFoot,ds,{
pageSize:numRows, //number of records displayed in grid
displayInfo:true, // change this to false, if you dont want info displayed
displayMsg:'Displaying records {0} - {1} of {2}',
emptyMsg:"No records to display"
});
// reconfigure the grid
grid.reconfigure(ds, grid.getColumnModel());
});

Here is how it looks after all said and done.

cfgrid with pagesize

Here is the full source code.