Sep
6
Entries for month: March 2010
Mar 25
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.
<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
Recent Comments