1. #1
    Ext JS Premium Member
    Join Date
    Nov 2007
    Posts
    74
    Vote Rating
    0
    sean.zhou is on a distinguished road

      0  

    Question missing scrollbar in IE8 for a GridPanel nested inside of vbox and card layout

    missing scrollbar in IE8 for a GridPanel nested inside of vbox and card layout


    I have a screen that shows correctly in FireFox 3.5 and 3.6; however, it is missing scrollbar in IE8 on a gridpanel nested inside of vbox layout.

    Bellow is the code skeleton that generates this screen:
    Code:
    var FlightSchedulePanel = function(config) {
      var labelWidth = 150;
      var headerPanel = {
        layout: 'column',
        border: false,
        autoScroll: true,
        defaults: {
          labelWidth: labelWidth,
          defaultType: 'textfield'
          ,border: false
          ,xtype: 'container'
          ,layout: 'formdescription'
        },
        items: [{
          items: [{
            // ......
          }]
          ,width: 450
        }, {
          width: 200, 
          labelWidth: 80,
          style: 'padding-left:15px;',
          items: [{
            // .......
          }]
          ,layout: 'form'
        }, {
          labelWidth: 80,
          items: [{
            // .....
          }]
        }]
        ,flex: 1.7
      };
      
      var mainPanel = {
        xtype: 'griddetailcontainer'
        ,layout: 'card'
        ,split: true
        ,buttonIndex: 1
        ,allowEdit: security.hasMaintenance
        ,items: [{
          id: 'flightsGridPanel', // use id so that users can persist grid configuration changes.
          xtype: 'grid',
          frame: true,
          controller: config.controller,
          enableColLock: false
          ,tbar: [{
            menu: {xtype: 'menu'}
          }]      
        }, {
          xtype: 'panel'
          ,hideMode : 'offsets'
          ,autoScroll: true
          ,bodyStyle: 'background-color:#DFE8F6'
          ,items: [{
            // .....
          }]      
        }]
        ,flex: 8.3
      };
      
      var oo = {
        region: 'center'
        ,layout: {type:'vbox', align:'stretch'}
        ,items: [headerPanel, mainPanel]
        ,tbar: [{
          xtype: 'tbsave'
        }, {
          // more buttons
        }]
      };
      return new Ext.Panel(oo);
    };
    
    viewport = new Ext.Viewport({
      layout: 'border'
      ,items: [{
        region: 'north'
        // top title panel
      }, FlightSchedulePanel()]
    });
    The images are attached from both IE8 and FF3.5(6).

    Regards
    Attached Images

  2. #2
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,809
    Vote Rating
    133
    mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold

      0  

    Default


    Your 'north' panel doesn't have any height specified.

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2007
    Posts
    74
    Vote Rating
    0
    sean.zhou is on a distinguished road

      0  

    Default


    Quote Originally Posted by mankz View Post
    Your 'north' panel doesn't have any height specified.
    It has height=0.

Similar Threads

  1. vbox-layout inside a border-layout with a grid + sizing
    By tobiu in forum Community Discussion
    Replies: 1
    Last Post: 21 Jul 2010, 7:14 AM
  2. Replies: 10
    Last Post: 17 May 2010, 10:12 AM
  3. No vertical scrollbar with vbox layout
    By mjdslob in forum Ext 3.x: Help & Discussion
    Replies: 9
    Last Post: 19 Jun 2009, 10:37 PM
  4. Simple GridPanel missing scrollbar
    By sapere in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 26 Mar 2008, 6:13 AM

Thread Participants: 1

Tags for this Thread