PDA

View Full Version : Checking for scrollbar in a grid using ExtJS 4.2.1



webfriend13
24 Jul 2013, 6:12 AM
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');
}

slemmon
25 Jul 2013, 9:53 PM
You should be able to use getScrollbarSize on the gridView:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-getScrollbarSize

webfriend13
26 Jul 2013, 1:15 AM
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.

slemmon
26 Jul 2013, 10:58 AM
You're right. Sorry about the misdirection there.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element-method-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:



Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" },
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" },
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" },
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "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
}
}]
});