Horizontally Scrollable Grid in ExtJS 3.3

Question

I'm new to ExtJS and am having hard time accommodating a large number of columns in a 600px wide Ext.grid.EditorGridPanel (see example below). Scrolling all grid columns together or something similar to the second grid shown in this example (Ext 4) would do it.

var grid = new Ext.grid.EditorGridPanel(
    this.getGridConfig('', ['a', 'b', 'c', '...', 'x', 'y', 'z'], [
        {
            dataIndex: 'a',
            header: 'A',
            editor: new Ext.form.TextField({width: 200, allowEmpty: false})
        },
        {
            dataIndex: 'b',
            header: 'B',
            editor: bCombo,
        } /* many more column definitions here... */],
        definitions,
        'disabled'
    )
);

I've tried to set autoScroll = true at several different levels without any luck. Is there a mechanism to handle tons of grid columns in ExtJS 3.3, similar to the one provided for handling tabs?

Answer 1

I've solved this issue by wrapping the Ext.grid.EditorGridPanel with the panel below and adjusting its width to accommodate all columns nicely.

var gridPanel = new Ext.Panel({
    width: '100%',
    height: '100%',
    renderTo: Ext.getBody(),
    autoScroll: true
});