thecfguy

A Unique Developer

Add header in cfgrid in coldfusion 9

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