<script>
init=function(){
//get the grid component
grid = ColdFusion.Grid.getGridObject("YourGridName");
//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: 25,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
emptyMsg: "<b>No Record</b>",
items:[
'-', {
pressed: false,
enableToggle:false,
text: 'Your 1st Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin// handler:showWin // should be replaced with your own function
},
'-', {
pressed: false,
enableToggle:false,
text: 'Your 2nd Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin2// handler:showWin2 // should be replaced with your own function
}
]
});
}
function showWin(){
alert('Button 1 works!!! :-)');
}
function showWin2(){
alert('Button 2 works!!! :-)');
}
</script>
,
items:[
'-', {
pressed: false,
enableToggle:false,
text: 'Your 1st Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin// handler:showWin // should be replaced with your own function
},
'-', {
pressed: false,
enableToggle:false,
text: 'Your 2nd Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin2// handler:showWin2 // should be replaced with your own function
}
]
<cfset ajaxOnLoad("init")>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Buttons & Paging in the toolbar</title>
<script>
init=function(){
//get the grid component
grid = ColdFusion.Grid.getGridObject("YourGridName");
//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: 25,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
emptyMsg: "<b>No Record</b>",
items:[
'-', {
pressed: false,
enableToggle:false,
text: 'Your 1st Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin// handler:showWin // should be replaced with your own function
},
'-', {
pressed: false,
enableToggle:false,
text: 'Your 2nd Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin2// handler:showWin2 // should be replaced with your own function
}
]
});
}
function showWin(){
alert('Button 1 works!!! :-)');
}
function showWin2(){
alert('Button 2 works!!! :-)');
}
</script>
</head>
<body>
<cfform name="YourGridFormName">
<!--- Replace the following with your cfgrid, this one is only here as a placeholder --->
<cfgrid name="YourGridName"
format="html"
pagesize="25"
striperows="yes"
gridlines="yes"
selectmode="row"
bind="cfc:yourCFC_Name.yourLoadFunctionName({cfgridpage},
{cfgridpagesize},
{cfgridsortcolumn},
{cfgridsortdirection})"
onchange="cfc:yourCFC_Name.yourFunctionName({cfgridaction},
{cfgridrow},
{cfgridchanged})">
<cfgridcolumn name="myCol1" header="Column 1" width="100"/>
<cfgridcolumn name="myCol2" header="Column 2" width="100"/>
<cfgridcolumn name="myCol3" header="Column 3" width="100"/>
</cfgrid>
</cfform>
<cfset ajaxOnLoad("init")>
</body>
</html>
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)