I would like to add a toolbar to the footer of an already existing cfgrid. I have 2.3.0
I tried the following but it did not work.
<html>
<head>
<title>Custom Toolbars Example</title>
<cfoutput>
<link rel="stylesheet" type="text/css"
href="#application.path#lib/extjs/resources/css/ext-all.css" />
<script src="#application.path#lib/extjs/adapter/ext/ext-base.js"></script>
<script src="#application.path#lib/extjs/ext-all-debug.js"></script>
</cfoutput>
<script type="text/javascript" src="#application.path#lib/extjs/package/toolbar/toolbar.js"></script>
<script type="text/javascript">
function init()
{
var grid = ColdFusion.Grid.getGridObject("SectionGrid");
var gridFoot = grid.GridView().getFooterPanel(true);
var gridHead = grid.GridView().getHeaderPanel(true);
var bbar = new Ext.Toolbar(gridFoot);
var tbar = new Ext.Toolbar(gridHead);
bbar.addtext("this is just a trial");
tbar.addbutton({text:"I am a button"});
grid.getColumnModel().on('columnmoved',
function(cm,oindex,nindex) {
var dirmsg = '', title = 'You Moved '+cm.getColumnHeader(nindex);
if (oindex > nindex){
dirmsg = (oindex-nindex)+' Column(s) to the Left';
}else{
dirmsg = (nindex-oindex)+' Column(s) to the Right';
}
Ext.Msg.alert(title,dirmsg);
}
);
grid.render();
}
</script>
</head>
<body>
<cfquery name="getSection" datasource="#application.dsn#">
SELECT SectionID,SectionNumber, SectionName
FROM Sp.Section
</cfquery>
<cfset args = structNew()>
<cfset args.name = "SectionGrid">
<cfset args.format = "html">
<cfset args.query = "getSection">
<cfset args.stripeRows = true>
<cfset args.selectColor = "##D9E8FB">
<cfform>
<cfgrid attributeCollection="#args#">
<cfgridcolumn name="SectionID" display="false">
<cfgridcolumn name="SectionNumber" header="SectionNumber">
<cfgridcolumn name="SectionName" header="SectionName">
</cfgrid>
</cfform>
<cfset ajaxOnLoad("init")>
</body>
</html>
Thanks in advance
2
Replies
AdChoices