1. #31
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    134
    Vote Rating
    0
    sramanna is on a distinguished road

      0  

    Default


    Hello,

    I am facing the same problem as well and the override isnt helping, I am using a column layout. Any grid from the samples can be used in place of examplegrid and it doesnt work.


    Code:
    var masterPanel = new Ext.Panel({
        layout: 'anchor',
        border: false,    
          region:'center', 
        items: [{
            anchor: '100%',
            autoHeight:true,
            layout: 'column',    
        items: [{
            columnWidth: 0.45,
            title:'WBS/OBS',    
            autoHeight:true,
            xtype: 'examplegrid'        
        },{
            columnWidth: 0.45,
            title:'Time Entry',
            autoHeight:true, 
            xtype: 'examplegrid'
        },{
            columnWidth: 0.10,
            title:'Total',
            autoHeight:true
        }] 
      }]    
    });

  2. #32
    Ext User
    Join Date
    May 2009
    Posts
    1
    Vote Rating
    0
    kribar is on a distinguished road

      0  

    Default


    Quote Originally Posted by berend View Post
    Unfortunately the patch doesn't work in my case. I've a GridPanel embedded in a tab panel. Only setting an explicit height gets my both the horizontal and vertical scrollbar. autoHeight gets a grid that seems to have an unbounded height, so no scrollbars at all.
    I am using a GridPanel in a Viewport and it does not work for me. I only see both scrollbars when I set an explicit height. Otherwise, no vertical scrollbar at all and the horizontal bar does not float at the bottom. If I arrow key all the way down and resize the window larger, then I see the horizontal bar.

  3. #33
    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


    You have a bug in your code then. I'm betting you have nested your GridPanel inside anoter Panel, and used that outer, wrapping Panel in the border layout.

    Post your problem according to the posting guidelines in the Help folder.

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

      0  

    Default


    How about this bug ? I got the same thing and tried to use many path in this threads, but it didn't work.
    Any ideas, I am very appreciated.

  5. #35
    Ext User
    Join Date
    Oct 2009
    Posts
    4
    Vote Rating
    0
    dilip.khichade is on a distinguished road

      0  

    Default


    I have a grid with autoHeight : true.It has horizontal scroll also.Height of grid is increasing depending on no of records.But because of horizontal scroll is taking some height,it is showing vertical scroll.This problem is only in IE7.works fine in mozilla 3.5.I am using ext v 2.2.1

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


    The only way you can solve this is by setting autoHeight:false and manually setting the grid height based on height of the x-grid3-body element plus the size of the header and padding (a bit like my patch on the first page does).

  7. #37
    Ext User
    Join Date
    Jan 2011
    Posts
    6
    Vote Rating
    0
    daivatsoni is on a distinguished road

      0  

    Default


    Hi condor,

    Thanks for providing your patch...!
    Your patch is working properly in Firefox, but problem comes in IE, I am looking for the patch which works also in IE7+. In IE7+ it gives JS error and stops loading of report with error.
    I am using ExtJs v3.2.1.
    As per my application, i am using groupingView grid.
    The code is as below:
    Code:
    Ext.onReady(function() {
    ...
    ...
    ...
    
      function startGrid(objReader, objColModels, objGroupHeader, objData, divId, reportHeading) {
          //console.log(objReader);
        var reader = new Ext.data.ArrayReader({}, objReader);
          
        var store = new Ext.data.GroupingStore({
              reader: reader,
              data: objData,
              sortInfo:{field: 'cname', direction: "ASC"},
              groupField:'grpby'
        });
      
        var    colModel=  new Ext.grid.ColumnModel({
          columns: objColModels,
          defaultSortable: true
        });
        
        var grid = new Ext.grid.GridPanel({
          border: false,
          autoHeight : true,
          title: reportHeading,
          store: store,
          colModel: colModel,
          plugins: [new Ext.ux.plugins.GroupHeaderGrid({
            rows: [ objGroupHeader ],
            hierarchicalColMenu: false
          })],
          collapsible: false,
          animCollapse: false,
          frame: false,
          view: new Ext.grid.GroupingView({
    //        forceFit:true,  // I don't want to do this. My report contains approx 30 to 40 columns.
            groupTextTpl: '{text}'
          })
        });
        
        grid.render(divId);
        store.loadData(objData);  
      }  
    });
    
    // your patch code goes here
    Ext.override(Ext.grid.GridView, {
        layout : function(){
            if(!this.mainBody){
                return;
            }
            var g = this.grid;
            var c = g.getGridEl(), cm = this.cm,
                    expandCol = g.autoExpandColumn,
                    gv = this;
            var csize = c.getSize(true);
            var vw = csize.width;
            if(vw < 20 || csize.height < 20){
                return;
            }
            if(g.autoHeight){
                csize.height = this.mainHd.getHeight() + this.mainBody.getHeight();
                if (!this.forceFit) {
                    csize.height += this.scrollOffset;
                }
            }
            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.onLayout(vw, vh);
        }
    });
    Please help in this concern ASAP...

    Is there any alternate way to overcome this issue in ExtJs v3.2.1?

    Thanks,
    Daivat soni

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


    The Ext.grid.GridView.layout code has changed since I made the patch. Have a look at the Ext.grid.GridView.layout code in the 3.2.1 SDK and base the patch on that.

  9. #39
    Ext User
    Join Date
    Jan 2011
    Posts
    6
    Vote Rating
    0
    daivatsoni is on a distinguished road

      0  

    Default


    Hi Condor,

    Thanks for your reply.

    I am new in ExtJs so not getting what you mean to say. But I tried to change the code as mentioned below:
    Code:
    Ext.override(Ext.grid.GridView, {
        layout : function() {
            if(!this.mainBody){
                return; // not rendered
            }
            var g = this.grid;
            var c = g.getGridEl();
            var csize = c.getSize(true);
            var vw = csize.width;
    
            if(vw < 20 || csize.height < 20){ // display: none?
                return;
            }
    
            if(g.autoHeight){
                csize.height = this.mainHd.getHeight() + this.mainBody.getHeight();
                if (!this.forceFit) {
                    csize.height += this.scrollOffset;
                }
            }
            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);
        }    
    });
    Please correct me if i am wrong anywhere in above code, because it gives error in IE and not fixed by above code snippet.

    Thanks,
    Daivat Soni.

  10. #40
    Ext User
    Join Date
    Jan 2011
    Posts
    6
    Vote Rating
    0
    daivatsoni is on a distinguished road

      0  

    Default


    I tried to find the problem in IE, and i got it at "csize.height += this.scrollOffset;". This value is 'NaN'/'undefined' in browser. So as of now i kept it at 20 and i got expected result. Below is my final override code:
    Code:
    Ext.override(Ext.grid.GridView, {
        layout : function() {
            if(!this.mainBody){
                return; // not rendered
            }
            var g = this.grid;
            var c = g.getGridEl();
            var csize = c.getSize(true);
            var vw = csize.width;
    
            if(vw < 20 || csize.height < 20){ // display: none?
                return;
            }
    
            if(g.autoHeight){
                csize.height = this.mainHd.getHeight() + this.mainBody.getHeight();
                if (!this.forceFit) {
    //                csize.height += this.scrollOffset; // Kept the fix size of scroll offset.
                      csize.height += 20;
                }
            }
            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);
        }    
    });
    I tested above code in Firefox, IE, Google Chrome and Safari browsers.
    Bug: The scroll will not work properly if user zoom the page.