PDA

View Full Version : Can we have Grid with vertical scrollbar in north region of border layout?



Kanakaraja
2 Jul 2012, 3:07 PM
Hi,

I want to add GRID component with Vertical Scroll bar in north region of border layout. I tried adding GRID in north layout and the scroll bars are not appearing. But if i add GRID in Center region of border layout then the GRID scroll bar appears.

Please suggest how to add vertical scroll bars for the GRID in north region of border layout.

Thanks,
Kanakaraja

sword-it
2 Jul 2012, 10:22 PM
HI!

Try this code , it will work fine




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.panel.Panel', {
width: 500,
height: 400,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'north', // position for region
xtype: 'panel',
height: 140,
split: true, // enable resizing
margins: '0 5 5 5',
items:{
xtype:'grid',
title: 'Simpsons',
autoScroll:true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 100,
width: 400
}
},{
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true,
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});



OUTPUT:-

36740