Previously I have posted about to adding record information in cfgrid footer. Today I was working with adding header in cfgrid, in coldfusion 8 I have work around it but again because of version of Ext 3.0. Here I have tried to demostrate adding header in cfgrid with ext dropdown and reload grid button. [googlead]single_line[/googlead]
<html> <head> <script type="text/javascript"> var gridRender = function() { //over grid = ColdFusion.Grid.getGridObject('artGrid'); var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true); var cmbstate = new Ext.form.ComboBox({ id:"cmbstate", emptyText:"State", mode:"local", width:65, triggerAction:"all", displayField:"text", valueField:"value", store:new Ext.data.SimpleStore({fields: ["value","text"],data:[['CA','CA'],['CO','CO'],['FL','FL']]}) }); //Insert blank div on top of the grid. var tbar=Ext.DomHelper.insertFirst(grid.el,{tag:'div',id:Ext.id()},true); //Convert inserted div to Ext toolbar var gtbar = new Ext.Toolbar({ renderTo: tbar, items: [cmbstate,'-', { text:"Reload", cls:"x-btn-text", tooltip:"Reload", handler: function(){ColdFusion.Grid.refresh('artGrid');} }, ] }); 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> <br/><br/> <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>
Below statement will add blank div on top of the grid and later we will conver it to toolbar.
var tbar=Ext.DomHelper.insertFirst(grid.el,{tag:'div',id:Ext.id()},true);
Below code will create our blank div to ext toolbar and in items attributes you can add ext control in it and also link with cfc argument.
var gtbar = new Ext.Toolbar({ renderTo: tbar, items: [cmbstate,'-', { text:"Reload", cls:"x-btn-text", tooltip:"Reload", handler: function(){ColdFusion.Grid.refresh('artGrid');} }, ] });
Download code