horizontal scrollbar in grid

[michael melsen]

hi guys,

I've been trying to implement a grid in our application which is finished. The last thing I have to do is to configure the scrolling. Unfortunately I can't get it to work. One way or the other the scrollbar doesn't show up and columns get vanished. Perhaps you guys can help me out?

here is my gridpanel:

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'
            }, {
                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',
                autoWidth : true                
            }, {
                header : "Geboortedatum",
                sortable : false,
                // Format to display.
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex : 'geboorteDatum'
            }, this.rowActions  // eo rowNumberer
        ]); // eo personColumnModel
    
        // configure the grid
        Ext.apply(this, {
            loadMask: true,
            collapsible : 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 : 'YYYY-mm-dd',
                        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'}
            ,autoScroll : true
            ,layout: 'fit'
        }); // 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);

[Condor]

Scrolling and autoHeight:true are mutually exclusive.

You need to configure the grid with autoHeight:false and give it a fixed width and height (or put the grid in a fitting layout).

ps. In Ext 3 I would recommend overriding the constructor instead of initComponent.

[elkidos]

The dilemma between overriding constructor or initComponent seems pretty confusing, at least for me. Some advocate the use of initComponent while others, the constructor. Correct me if I'm wrong, but I think Ext Designer overrides initComponent?

In my project, I started with initComponent and switch to constructor based on one of your recommendation. In fact I came across one case where constructor worked better than initComponent, but can't remember why.

[Condor]

initComponent has 3 problems:
1. You can't set the id in 'this'.
2. You can't set listeners in 'this' (but you can use on/addListener).
3. You must assign all config options to both 'this' and 'this.initialConfig' before calling the superclass.
As long as you keep these three points in mind, initComponent will work just as well as the constructor.

(but for simplicity I'm recommending overriding the constructor)

[michael melsen]

Thanks guys,

the setting of autoWidth to false and manually adding a width does fix the problem. Seems to be a bug so I searched for it and found it was reported a long time ago. Too bad it wasn't fixed in the current 3.0.3 release.

anyway, appreciate your efforts!

[Condor]

You mean this bugreport?

The problem is that this isn't fixable because browsers don't support overflow-x:auto + overflow-y:visible.
The only solution is to work around the problem by manually updating the grid height (see patch suggestion in bugreport).

[Animal]

Condor, can you put this explanation into the grid FAQ? Then at least we'd have a place to point to instead of typing out the same explanations over and over and over again.

[Condor]

Done.