1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Vote Rating
    5
    Answers
    10
    webfriend13 is on a distinguished road

      0  

    Default Unanswered: Checking for scrollbar in a grid using ExtJS 4.2.1

    Unanswered: Checking for scrollbar in a grid using ExtJS 4.2.1


    HI All,

    I just upgraded from ExtJs 4.1 to ExtJs 4.2.1 and I am facing some issue. Earlier I used following code to figure out if vertical and horizontal scrollbars are present or not but this code does not work any longer with ExtJS 4.2.1. Please suggest some solution.

    if (grid.view.getWidth() < parseFloat(grid.view.getEl().dom.children[0].style.width)) {
    alert('horizontal scroll is present');
    }
    if (grid.view.getHeight() < parseFloat(grid.view.getEl().dom.children[0].scrollHeight)) {
    alert('vertical scroll is present');
    }

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    You should be able to use getScrollbarSize on the gridView:
    http://docs.sencha.com/extjs/4.2.1/#...tScrollbarSize


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Vote Rating
    5
    Answers
    10
    webfriend13 is on a distinguished road

      0  

    Default


    Hi Slemmon,

    Thank you for the reply. getScrollbarSize() is not supported on grid object. Also using Ext.getScrollbarSize() returns the browsers scrollbar size. in my case when the grid is not having horizontal scrollbar this object is returning 17,17 as the object value.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    You're right. Sorry about the misdirection there.
    http://docs.sencha.com/extjs/4.2.1/#...d-isScrollable

    Ext.dom.Element has an isScrollable method that just returns boolean whether the element is scrollable vertically or horizontally. But, if we look at the source it's very straightforward and we can borrow from it like so:

    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"  },
            { '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"  },
            { '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"  },
            { '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'
            }
        }
    });
    
    
    var grid = 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: 400,
        renderTo: Ext.getBody(),
        tbar: [{
            text: 'Get ScrollBars',
            handler: function () {
                var dom = grid.getView().getEl().dom;
                // borrowed from isScrollable
                console.log(dom.scrollHeight > dom.clientHeight); // vertical check
                console.log(dom.scrollWidth > dom.clientWidth);   // horizontal check
            }
        }]
    });


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

Thread Participants: 1

Tags for this Thread