1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    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
    5,124
    Answers
    405
    Vote Rating
    188
    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 slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    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
    5,124
    Answers
    405
    Vote Rating
    188
    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 slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Thread Participants: 1

Tags for this Thread