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
    infernoz is on a distinguished road

      0  

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

    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 - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,785
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    harel is on a distinguished road

      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
    harel is on a distinguished road

      0  

    Default This is fixed in 4.2.1.

    This is fixed in 4.2.1.


    No longer an issue.

  5. #5
    Sencha User
    Join Date
    Jul 2008
    Posts
    47
    Vote Rating
    0
    WutongDeath is on a distinguished road

      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
    infernoz is on a distinguished road

      0  

    Default sencha verification?

    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
    infernoz is on a distinguished road

      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
    aspdotnet is on a distinguished road

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