PDA

View Full Version : Making ExtJs 4.2.1 grid to adjust its height based on scroll bar visibility



webfriend13
25 Jul 2013, 11:49 PM
Hi All,

I have a simple grid developed using ExtJs 4.2.1 framework. The grid is having one bottom bar (bbar).
Problem: Horizontal scrollbar is not visible due to the bottom bar (its hidden behind the bottom bar). If I set the height of the grid using grid.setHeight(), I can see the horizontal scroll bar. Is there anyway to tell the grid to adjust its height based on scroll bar visibility?

slemmon
30 Jul 2013, 4:35 PM
You shouldn't have to do anything special. The below example works ok for me:



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', width: 200 },
{ text: 'Email', dataIndex: 'email', width: 200 },
{ text: 'Phone', dataIndex: 'phone', width: 200 }
],
width: 400,
bbar: [{
text: 'Sample Button'
}],
renderTo: Ext.getBody()
});