ColdFusion.Grid.refreshBottomToolbar

<cfcomponent>
<cfscript>
remote any function getEmployees(page,pageSize,gridsortcolumn="EMP_ID",gridsortdirection="ASC"){
var startRow = (page-1)*pageSize;
var endRow = page*pageSize;

if(!isdefined("arguments.gridsortcolumn") or isdefined("arguments.gridsortcolumn") and trim(arguments.gridsortcolumn) eq "")
gridsortcolumn = "EMP_ID";
if(!isdefined("arguments.gridsortdirection") or isdefined("arguments.gridsortdirection") and arguments.gridsortdirection eq "")
gridsortdirection = "ASC";
var mysql = "SELECT Emp_ID, FirstName, EMail, Department FROM Employees";
if(isdefined("arguments.gridsortcolumn") and arguments.gridsortcolumn neq "")
mysql = mysql & " ORDER BY " & gridsortcolumn;
if(isdefined("arguments.gridsortdirection") and arguments.gridsortdirection neq "")
mysql = mysql & " " & gridsortdirection ;
rs1 = new query(name="team", datasource="cfdocexamples", sql=mysql).execute();
return QueryConvertForGrid(rs1.getResult(), page, pageSize);
}


remote any function editEmployees(gridaction,gridrow,gridchanged){
writelog("edit employee info");
}

</cfscript>
</cfcomponent>

<script>
var refreshToolbar = function(id,type){
type == "top" ? ColdFusion.Grid.refreshTopToolbar(id) : ColdFusion.Grid.refreshBottomToolbar(id);
}

var hideToolbar = function(id,type){
type == "top" ? ColdFusion.Grid.hideTopToolbar(id) : ColdFusion.Grid.hideBottomToolbar(id);
}

var showToolbar = function(id,type){
(type == "top") ? ColdFusion.Grid.showTopToolbar(id) : ColdFusion.Grid.showBottomToolbar(id);
}

var handleToolbar = function(id,type){
if(type == "top"){
tbar = ColdFusion.Grid.getTopToolbar(id);
tbar.addButton({
text: "Add User Account",
tooltip: "Add a user account",
handler: addUserAccount
});
}
else{
bbar = ColdFusion.Grid.getBottomToolbar(id);
bbar.add(new Ext.Toolbar.Separator());
bbar.addButton({
text: "Delete User Account",
tooltip: "Delete a user account",
handler: deleteUserAccount
});
}
}

var GetUserInfo = function(){
alert("Retrieving user account");
}

var addUserAccount = function(){
alert("Adding new user account")
}
var deleteUserAccount = function(){
alert("Deleting user account")
}
</script>
<cfform>
<br>
<cfinput type="button" onClick="showToolbar('empGrid','top')" name="btn1" value="Show Top Toolbar">
<cfinput type="button" onClick="handleToolbar('empGrid','top')" name="btn2" value="Add button to Top Toolbar">
<cfinput type="button" onClick="refreshToolbar('empGrid','top')" name="btn3" value="Refresh Top Toolbar">
<cfinput type="button" onClick="hideToolbar('empGrid','top')" name="btn4" value="Hide Top Toolbar">
<br><br>

<cfgrid
format="html"
name="empGrid"
width="800"
pagesize=5
sort=true
title="Employee database"
collapsible="true"
insert="yes"
delete="yes"
bind="cfc:grid.getEmployees({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
onChange="cfc:grid.editEmployees({cfgridaction},{cfgridrow},{cfgridchanged})"
selectMode="edit"
>
<cfgridcolumn name="Emp_ID" display=false header="ID" />
<cfgridcolumn name="FirstName" display=true header="First Name"/>
<cfgridcolumn name="Email" display=true header="Email"/>
<cfgridcolumn name="Department" display=true header="Department" />
</cfgrid>

<br><br>
<cfinput type="button" onClick="hideToolbar('empGrid','bottom')" name="btn5" value="Hide Bottom Toolbar">
<cfinput type="button" onClick="showToolbar('empGrid','bottom')" name="btn6" value="Show Bottom Toolbar">
<cfinput type="button" onClick="handleToolbar('empGrid','bottom')" name="btn7" value="Add button to Bottom Toolbar">
<cfinput type="button" onClick="refreshToolbar('empGrid','bottom')" name="btn8" value="Refresh Bottom Toolbar">
</cfform>