CFGRID horizontal scroll - coldfusion

Question

I am having a CFGRID that contains multiple columns, the grid exceed the page size due to the amount of columns.
I been looking up on how to add a horizontal scroll bar to the grid so the grid can be within the page but scroll through the columns, but I am unable to find a working example or a answer on how to do this.
I have solved the problem.
It turns out that you are need to specify both the Height and Width column, I only specified the Width column.
Thanks,

Answer 1

If you define a width to your grid, it should scroll to view the other columns. This this example:
http://jsfiddle.net/YRraU/2/
var
grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
width : 100
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
}
}, {
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Hold stock';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
}
}]
}
],
height: 350,
width: 300, // 30 pixel width defined here
title: 'Array Grid',
renderTo: 'grid',
viewConfig: {
stripeRows: true
},
listeners: {
viewready: function(){
var c = this.columns[5];
var p = c.getPosition();
this.scrollByDeltaX(p[0]);
}
}
});
});
You can also search on extjs grid horizontal scrol, rather than CFGRID to find more examples.

Answer 2

It turns out that you are need to specify both the Height and Width column, I only specified the Width column.