Hi guys,

I have a problem with getting the horizontal scrollbar available when my grid contains to many columns for it's panel to show. I tried several things but can't make it work. Any idea?

Code:
Ext.ns('Student');
 
// create pre-configured grid class
Student.Grid = Ext.extend(Ext.grid.GridPanel, {
     

    initComponent:function() {
      
         // create row actions
        this.rowActions = new Ext.ux.grid.RowActions({
            align: 'right',
                header: 'Meer details'
                ,widthSlope: 70
                ,actions:[{
                        iconCls:'icon-zoom'
                        ,qtip:'Deze knop toont meer detailgegevens over deze student'
                        ,style:'margin:0 0 0 3px'
                        }]
                });
           this.rowActions.on('action', this.onRowAction, this);    
      
      
        this.personColumnModel = new Ext.grid.ColumnModel([
          // This is a utility class that can be passed into a
           // Ext.grid.ColumnModel
          // as a column config that provides an automatic row numbering
        //column.
              new Ext.grid.RowNumberer(), {
                id : 'id',
                header : "Identify",
                dataIndex : 'id',
                hidden : true
            }, {
                header : "Studielinknummer",
                sortable : true,
                dataIndex : 'slNummer'
            }, {
                header : "Correspondentienummer",
                sortable : true,
                dataIndex : 'tmpCorrespondentieNummer',
                width : 200
            }, {
                header : "Achternaam",
                sortable : true,
                dataIndex : 'achterNaam'
            }, {
                header : "Voorletters",
                sortable : false,
                dataIndex : 'voorLetters'
            }, {
                header : "Voorvoegsels",
                sortable : false,
                dataIndex : 'voorVoegsels'
            }, {
                header : "Voornamen",
                sortable : false,
                dataIndex : 'voorNamen',
                hidden : true
            }, {
                header : "Roepnaam",
                sortable : true,
                dataIndex : 'roepNaam'
            }, {
                header : "Geslacht",
                sortable : false,
                dataIndex : 'geslacht'
            }, {
                header : "Geboortedatum",
                sortable : false,
                // Format to display.
                renderer : Ext.util.Format.dateRenderer('Y-m-d'),
                dataIndex : 'geboorteDatum'
            }, this.rowActions  // eo rowNumberer
        ]); // eo personColumnModel
    
        // configure the grid
        Ext.apply(this, {
            loadMask: true,
            autoHeight : true,
            autoWidth: true,
            enableColumnMove : true,
            store:new Ext.data.Store({
                reader:new Ext.data.JsonReader({
                    id:'id'
                    ,totalProperty:'students.totalRows'
                    ,root:'students.data'
                    }, [ {
                        name : 'id',
                        mapping : 'id'
                    }, {
                        name : 'slNummer',
                        mapping : 'slNummer'
                    }, {
                        name : 'tmpCorrespondentieNummer',
                        mapping : 'tmpCorrespondentieNummer'
                    }, {
                        name : 'achterNaam',
                        mapping : 'achterNaam'
                    }, {
                        name : 'voorLetters',
                        mapping : 'voorLetters'
                    }, {
                        name : 'voorVoegsels',
                        mapping : 'voorVoegsels'
                    }, {
                        name : 'voorNamen',
                        mapping : 'voorNamen'
                    }, {
                        name : 'roepNaam',
                        mapping : 'roepNaam'
                    }, {
                        name : 'geslacht',
                        mapping : 'geslacht'
                    }, {
                        name : 'geboorteDatum',
                        type : 'date',
                        dateFormat : 'Y-m-d',
                        mapping : 'geboorteDatum'
                    } ]) // eo jsonreader
                ,proxy: new Ext.data.HttpProxy( {url : 'ActionHandlerServlet?action=studentData'})
            }) // eo store
            ,cm: this.personColumnModel
            ,plugins:[new Ext.ux.grid.Search({
                 checkIndexes:['slNummer', 'tmpCorrespondentieNummer', 'achterNaam']
                ,disableIndexes:['id', 'geboorteDatum']
                ,minChars:2
                ,autoFocus:true
            }), this.rowActions]    
            ,viewConfig:{forceFit:false, sortAscText: 'Sorteer oplopend', sortDescText: 'Sorteer aflopend'}
        }); // eo apply
 
        // add paging toolbar
        this.bbar = new Ext.PagingToolbar({
            store:this.store
            ,displayInfo:true
            ,pageSize:10
        }); // eo pagingtoolbar
 
        // call parent
        Student.Grid.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent

    ,onRender:function() {
     
    // call parent
    Student.Grid.superclass.onRender.apply(this, arguments);
     
    // load the store
    this.store.load({params:{start:0, limit:10}});
     
    } // eo function onRender
    
    ,onRowAction:function(grid, record, action, row, col) {
        switch(action) {
            case 'icon-zoom':
                alert('test');
            break;
            default:
            break;
         }
    } // eo onRowAction
    

}); // eo extend
 
// register component
Ext.reg('StudentSearchPanel', Student.Grid);