Results 1 to 10 of 10

Thread: Horizontal Scrollbar not appearing on grid unless height of grid is defined

    This duplicates another bug already reported in our system: EXTJS-9387
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Vote Rating
    2
      0  

    Default Horizontal Scrollbar not appearing on grid unless height of grid is defined

    Ext version tested:
    • Ext 4.2.0.663


    Browser versions tested against:
    • Firefox
    • IE8
    • IE9


    Description:
    • A horizontal scrollbar does not appear in a grid panel when the contents of the panel is larger than the panel itself unless a height is set on panel
    • Related to the first point, a horizontal scrollbar does not appear in a grid panel even if a height is set unless data exists in the panel. This behavior does not allow users to view the headers names of columns without data in the grid


    Steps to reproduce the problem:
    • Used the example grid and store from the ExtJS 4.1.0 and 4.2 documentation (same example). Made the width of the grid smaller so all fields cannot be seen without scrolling. I then commented out the height configuration and noticed that the horizontal scrollbar does not appear in the 4.2 version of ExtJS
    • Removing the store configuration from the grid prevents the horizontal scrollbar from appearing as well, even if a height is configured
    • AutoScroll: true or OverflowX: scroll/auto does not resolve these issues


    The result that was expected:
    • The horizontal scrollbar should be present when the fields of a grid overflows the grids width and the user has specified that the contents should not be cut off (via autoScroll or overflowX). The height of the grid or the fact whether records are in the grid should not be a factor of whether the horizontal scrollbar appears


    The result that occurs instead:
    • The only way to show the horizontal scrollbar is to specify a static height on the grid panel. This is not viable option when dynamic heights are needed for components, or if the user wants the height of the grid to be changed as data comes in and out of the component
    • When no data is in the grid, the horizontal scrollbar cannot be seen/used, which hides column headers from the user.


    Test Case:
    This example was taken from the ExtJS documentation. ExtJS 4.1.0 shows a scrollbar, but 4.2.0 does not. As you can see, data is cut off and not easily accessible without the horizontal scroll.

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
       // height: 200,
        width: 200,
        autoScroll: true,
        renderTo: Ext.getBody()
    });
    Even with a height set, if no data exists in the grid, a horizontal scrollbar cannot be used.
    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
       // store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 200,
        autoScroll: true,
        renderTo: Ext.getBody()
    });
    Both autoScroll and overflowX configs do not solve this issue

    Debugging already done:
    • none


    Possible fix:
    • not provided


    Additional CSS used:
    • only default ext-all.css


    Operating System:
    • Windows 7

  2. #2
    Sencha - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Vote Rating
    257
      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Sep 2009
    Location
    London
    Posts
    54
    Vote Rating
    1
      0  

    Default

    We are having this problem as well, and I wanted to inquire about any time frames ot have this resolved as we are very much dependant on the ability to do horizontal scrolls in our app which we are migrating from version 3.x ot 4.2. Is there an override we can call in the mean while to resolve this temporarily until the official fix is out?

    Harel

  4. #4
    Sencha User
    Join Date
    Sep 2009
    Location
    London
    Posts
    54
    Vote Rating
    1
      0  

    Default This is fixed in 4.2.1.

    No longer an issue.

  5. #5
    Sencha User
    Join Date
    Jul 2008
    Posts
    47
    Vote Rating
    0
      0  

    Default

    I have the same problem, after upgraded to 4.2.1 and tested, NOT fixed!

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Vote Rating
    2
      0  

    Default sencha verification?

    I have yet to upgrade to 4.2.1 but intrigued if i should to resolve this issue. There are conflicting statements on this thread as to whether this issue was fixed. Could a sencha representative verify whether this bug was fixed in 4.2.1.

    Furthermore, could someone point me in the direction where we could read the release notes/bug fixes for a release without downloading the release itself? This could be the place where one could verify whether a bug was fixed or not easily.

    Thanks,

    infernoz

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Location
    New York City
    Posts
    109
    Vote Rating
    2
      0  

    Default

    Just wondering if there was any progress related to this bug.

    Also is there a way of tracking bugs without downloading the latest ExtJS version and trying to see if the bug is fixed yourself, or posting the aforementioned question the forum?

    Thanks,

    infernoz

  8. #8
    Sencha User
    Join Date
    Jul 2010
    Location
    Vietnam
    Posts
    3
    Vote Rating
    0
      0  

    Default

    You can try this:

    gridView = Ext.create('Ext.grid.Panel', {
    id: gridViewId,
    store: myStore,
    columns: myColumns,
    dockedItems: [
    {
    xtype: 'pagingtoolbar',
    dock: 'bottom',
    store: myStore,
    displayInfo: true
    }
    ],
    viewConfig: {
    loadMask: true,
    stripeRows: false
    },
    emptyText: 'No data to display.'
    });


    //container
    Ext.create('Ext.panel.Panel', {
    id: containerId,
    renderTo: divContainer,
    width: '100%',
    border: false,
    items: [gridView]
    });


    function setHeightForGrid(grid) {
    var h = grid.getHeight();
    if (h > 0 && h < 400)
    grid.view.setHeight(h);
    else {
    grid.view.setHeight(config.height);
    }
    }


    function setWidthForGrid(grid) {
    var widthOfPanel = Ext.getCmp(containerId).getWidth(),
    columnCount = grid.view.panel.columns.length,
    lastColumnW = grid.view.panel.columns[columnCount - 1].width,
    w = 2;
    for (var i = 0; i < columnCount; i++) {
    w += grid.view.panel.columns[i].width;


    }
    if (w > widthOfPanel) {
    w = widthOfPanel;
    grid.view.setWidth(w);
    grid.view.panel.setWidth(w);
    }
    else {
    lastColumnW += widthOfPanel - w;
    grid.view.panel.columns[columnCount - 1].setWidth(lastColumnW);
    }
    }

    myStore.load({
    callback: function () {
    setHeightForGrid(gridView);
    setWidthForGrid(gridView);
    }
    });

  9. #9
    Sencha User
    Join Date
    Jul 2015
    Posts
    2
    Vote Rating
    0
      0  

    Default Dock component layout writes height information to the panel's DOM elements

    http://docs.sencha.com/extjs/4.2.1/#...g-manageHeight

    Quote Originally Posted by infernoz View Post
    Ext version tested:
    • Ext 4.2.0.663


    Browser versions tested against:
    • Firefox
    • IE8
    • IE9


    Description:
    • A horizontal scrollbar does not appear in a grid panel when the contents of the panel is larger than the panel itself unless a height is set on panel
    • Related to the first point, a horizontal scrollbar does not appear in a grid panel even if a height is set unless data exists in the panel. This behavior does not allow users to view the headers names of columns without data in the grid


    Steps to reproduce the problem:
    • Used the example grid and store from the ExtJS 4.1.0 and 4.2 documentation (same example). Made the width of the grid smaller so all fields cannot be seen without scrolling. I then commented out the height configuration and noticed that the horizontal scrollbar does not appear in the 4.2 version of ExtJS
    • Removing the store configuration from the grid prevents the horizontal scrollbar from appearing as well, even if a height is configured
    • AutoScroll: true or OverflowX: scroll/auto does not resolve these issues


    The result that was expected:
    • The horizontal scrollbar should be present when the fields of a grid overflows the grids width and the user has specified that the contents should not be cut off (via autoScroll or overflowX). The height of the grid or the fact whether records are in the grid should not be a factor of whether the horizontal scrollbar appears


    The result that occurs instead:
    • The only way to show the horizontal scrollbar is to specify a static height on the grid panel. This is not viable option when dynamic heights are needed for components, or if the user wants the height of the grid to be changed as data comes in and out of the component
    • When no data is in the grid, the horizontal scrollbar cannot be seen/used, which hides column headers from the user.


    Test Case:
    This example was taken from the ExtJS documentation. ExtJS 4.1.0 shows a scrollbar, but 4.2.0 does not. As you can see, data is cut off and not easily accessible without the horizontal scroll.

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
       // height: 200,
        width: 200,
        autoScroll: true,
        renderTo: Ext.getBody()
    });
    Even with a height set, if no data exists in the grid, a horizontal scrollbar cannot be used.
    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
       // store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 200,
        autoScroll: true,
        renderTo: Ext.getBody()
    });
    Both autoScroll and overflowX configs do not solve this issue

    Debugging already done:
    • none


    Possible fix:
    • not provided


    Additional CSS used:
    • only default ext-all.css


    Operating System:
    • Windows 7

  10. #10
    Sencha User
    Join Date
    Jul 2015
    Posts
    2
    Vote Rating
    0
      0  

    Default manageHeight

    http://docs.sencha.com/extjs/4.2.1/#...g-manageHeight

    Ext.panel.Panel
    view source
    manageHeight : Boolean

    When true, the dock component layout writes height information to the panel's DOM elements based on its shrink wrap h...
    When true, the dock component layout writes height information to the panel's DOM elements based on its shrink wrap height calculation. This ensures that the browser respects the calculated height. When false, the dock component layout will not write heights on the panel or its body element. In some simple layout cases, not writing the heights to the DOM may be desired because this allows the browser to respond to direct DOM manipulations (like animations).
    Defaults to: true
    Available since: 4.1.0

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •