1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    9
    Vote Rating
    0
    stouset is on a distinguished road

      0  

    Default [2.2.1][DUP] autoHeight and missing scrollbars

    [2.2.1][DUP] autoHeight and missing scrollbars


    I've got an extremely wide GridPanel with a variable number of rows. I'm setting autoHeight so that the grid sizes itself appropriately, but when I do so, the horizontal scrollbar disappears. There's another post that seems to be addressing the same issue, but forceFit is inapproprite to use in my case.

    How can I have my cake and eat it too, here?

    I've uploaded two images. With the autoheight image, I've specified "autoHeight: true", and I have no scrollbars whatsoever. If I comment the line out, you get the no-autoheight image, which has a horizontal scrollbar (and, incidentally, a vertical scrollbar necessitated by the space taken up by the horizontal one). For other reasons, it's necessary that I use "autoHeight: true" here.

    My code is pasted below.

    Code:
    Ext.onReady(function() {
      var model = new Ext.grid.ColumnModel(/* ... */);
      var store = new Ext.data.GroupingStore(/* ... */);
      var view  = new Ext.grid.GroupingView();
      
      var grid = new Ext.grid.GridPanel({
        title: "Cluster Comparison",
        
        width     : '100%',
        autoHeight: true,
        loadMask  : true,
        stripeRows: true,
       
        store: store,
        cm   : model,
        view : view,
        
        renderTo: "c5db95fc-513b-4be6-9775-5a26e80145a1"
      });
    });
    Attached Images

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    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


    Duplicate of this post.

  3. #3
    Ext User
    Join Date
    Sep 2008
    Posts
    9
    Vote Rating
    0
    stouset is on a distinguished road

      0  

    Default


    None of those solutions seem applicable to the 2.2.1 code base, given that virtually all of them are full-on overrides of the layout function, and that code has been changed.

    I've tried adapting the same ideas to the 2.2.1 release, but haven't gotten anywhere.

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    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


    If you don't care about FF 2 or Safari 2 support then you can simply use:
    Code:
    Ext.override(Ext.grid.GridView, {
            if(!this.mainBody){
                return; 
            }
            var g = this.grid;
            var c = g.getGridEl();
            var csize = c.getSize(true);
            var vw = csize.width;
            if(vw < 20 || csize.height < 20){ 
                return;
            }
            if(g.autoHeight){
                this.scroller.dom.style.overflowY = 'visible';
                if(Ext.isSafari){
                    this.scroller.dom.style.position = 'static';
                }
            }else{
                this.el.setSize(csize.width, csize.height);
                var hdHeight = this.mainHd.getHeight();
                var vh = csize.height - (hdHeight);
                this.scroller.setSize(vw, vh);
                if(this.innerHd){
                    this.innerHd.style.width = (vw)+'px';
                }
            }
            if(this.forceFit){
                if(this.lastViewWidth != vw){
                    this.fitColumns(false, false);
                    this.lastViewWidth = vw;
                }
            }else {
                this.autoExpand();
                this.syncHeaderScroll();
            }
            this.onLayout(vw, vh);
        }
    });

  5. #5
    Ext User
    Join Date
    Sep 2008
    Posts
    9
    Vote Rating
    0
    stouset is on a distinguished road

      0  

    Default


    Unfortunately, those are our two main development platforms.

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    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


    Really? I would have thought that almost everybody would have upgraded to Firefox 3 or Safari 3 by now (unless you own an old Mac).

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

      0  

    Default


    You'd think wouldn't you.

    I've spent the last two days piddling around trying to fix things for IE6. Released in 2001. Bug ridden, and still grimly being used.

  8. #8
    Ext User
    Join Date
    Sep 2008
    Posts
    9
    Vote Rating
    0
    stouset is on a distinguished road

      0  

    Default


    Ack! Sorry, momentary lapse of sanity. Yes, we're using Firefox and Safari 3, so this solution should be applicable.

    Unfortunately, it doesn't actually work. Much like the current code in layout(), setting the overflow property to 'visible' doesn't have any affect. However, setting it to 'auto' absolutely does the trick.

    I've factored this into a plugin, so it should be usable by others in the future (the plugin also reenables the maxHeight property, still in the documentation but apparently deprecated since 1.0).

    Code:
    Ext.namespace('Ext.ux.plugins');
    
    Ext.ux.plugins.GridViewFixes = function() {
      function onLayout(vw, vh) {
        var g     = this.grid;
        var c     = g.getGridEl();
        vh        = vh || c.getSize(true).height;
        
        if (g.autoHeight) {
          this.scroller.dom.style.overflowY = 'auto';
          
          if (g.maxHeight && vh > g.maxHeight) {
            var hh = this.mainHd.getHeight();
            vh     = g.maxHeight;
            this.el.setSize(vw, vh);
            this.scroller.setSize(vw, vh - hh);
          }
        }
      }
      
      return {    
        init: function(grid) {
          var view = grid.getView();
          view.onLayout = view.onLayout.createInterceptor(onLayout, view);
        }
      };
    };

  9. #9
    Ext User
    Join Date
    Aug 2009
    Posts
    19
    Vote Rating
    0
    blackghost is on a distinguished road

      0  

    Default


    hi all,
    I have already used Condor's suggesstion, but it seems to be not work with me. IE8 and Firefox3.0
    I felt that there are a lot of data in but the grid just showed apart of them.

    Any ideas, I'm ver appreciated.