1. #1
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    164
    Vote Rating
    1
    michael melsen is on a distinguished road

      0  

    Default horizontal scrollbar in grid

    horizontal scrollbar in grid


    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:

    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'
                }, {
                    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);

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    95
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Jun 2009
    Posts
    72
    Vote Rating
    0
    elkidos is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    95
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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)

  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    164
    Vote Rating
    1
    michael melsen is on a distinguished road

      0  

    Default Solved!

    Solved!


    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!

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    95
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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).

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    95
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Done.

Thread Participants: 3