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
Sep 06, 2010 12:25 PM
Apr 15, 2010 at 2:14 PM This is exactly what I am looking for, thank you very much!!!!!
Could also do one that would add an "Add New" button on the left side in CF9 within the same <div> element?
Apr 16, 2010 at 2:02 AM You can add as many as you want. Just need specify order in Ext.Toolbar constructor.
see below
var gtbar = new Ext.Toolbar({
renderTo: tbar,
items: [
{
text:"Add New",
cls:"x-btn-text",
tooltip:"Add New",
handler: function(){//write your code to }
},
cmbstate,'-',
{
text:"Reload",
cls:"x-btn-text",
tooltip:"Reload",
handler: function(){ColdFusion.Grid.refresh('mtf');}
}]
});
Apr 20, 2010 at 2:07 PM Thanks Pritesh, the code still isn't working for me.. argh!!!
Is there anythign I need to change other than the grid name within the script?
Apr 20, 2010 at 2:09 PM Java error in IE saying 'Object Required' line 8.
Apr 20, 2010 at 2:16 PM Also getting: 'Events' is null or not an object. Any ideas?
Apr 21, 2010 at 5:58 AM @David,
In sample I have added extra comma (',') in items array which is causing issue in IE but work fine with Firefox. Try to remove extra comma for last element in array.
Still you may get "Object Required" error but still it will work fine with that error.
Still you are facing error send me code.
Apr 21, 2010 at 9:48 AM Yes, found it and it shows up now, EXCELLENT!!!! But, clicking reload is not changing the grid. I think I'm missing connecting to my cfc to change the query results. Any ideas?
Apr 22, 2010 at 12:21 PM {
text:"Reload",
cls:"x-btn-text",
tooltip:"Reload",
handler: function(){ColdFusion.Grid.refresh('artGrid');}
}
Doesn't required extra connection as we have done initially just bind handler with
ColdFusion.Grid.refresh('artGrid') (replace your grid name)
Apr 26, 2010 at 9:02 AM I already changed that and it didn't work. Here is my code:
<InvalidTag type="text/javascript">
var gridRender = function()
{
//over
grid = ColdFusion.Grid.getGridObject('mtfRequire');
var bbar = Ext.DomHelper.overwrite(grid.bbar, {tag:'div',id:Ext.id()},true);
var region = new Ext.form.ComboBox({
id:"region",
emptyText:"Region",
mode:"local",
width:75,
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({fields: ["value","text"], data:[['NCA','NCA'],['NME','NME'],['NMW','NMW'],['OTH','Other']]})
});
//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: [region,'-',
{
text:"Filter Grid",
cls:"x-btn-text",
tooltip:"Filter Grid",
handler: function(){ColdFusion.Grid.refresh('mtfRequire');}
}
]
});
gbbar = new Ext.PagingToolbar({
renderTo:bbar,
store: grid.store,
pageSize: 10,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} of {2} records</b>',
emptyMsg: "<b>No Records</b>"
});
};
</script>
May 6, 2010 at 10:31 AM How would I modify this to just add a header toolbar with just text, no menu, button, etc...?
May 8, 2010 at 3:30 AM @David,
replace combobox component with text field.
try below
var cmbstate = new Ext.form.TextField({name:"region"});
May 11, 2010 at 10:11 AM Great example, very helpful. Thank you
Aug 17, 2010 at 11:11 AM Hi,your cool demo led me to know how to add items on cfgrid toolbar. Ha! Ha! thanks a lot.
By the way, I want to know how to get the values of thoese items.
For example: I add an textfield on cfgrid toptoobar as your demo did.
var textCusID = new Ext.form.TextField({name:"cus_id"});
var gtbar = new Ext.Toolbar({
renderTo: tbar,
items: [labelCusID,textCusID,labeldisrateID,......
now,I need to get the value of textCusID,
I tried this code: ColdFusion.getElementValue('cus_id'); to get the value, but it did not work out...
So, I hope you show me a hint to deal with this requirement.
P.S: I'm not good at English, the Coldfusion is quite new for me, either. I hope you could understand what I say, Ha! Ha! anyway, thank a lot.