[2.2.1][DUP] autoHeight and missing scrollbars

[stouset]

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.

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"
  });
});

[Condor]

Duplicate of this post.

[stouset]

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.

[Condor]

If you don't care about FF 2 or Safari 2 support then you can simply use:

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);
    }
});

[stouset]

Unfortunately, those are our two main development platforms.

[Condor]

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

[Animal]

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.

[stouset]

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

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);
    }
  };
};

[blackghost]

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.