Can we have Grid with vertical scrollbar in north region of border layout?

[Kanakaraja]

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]

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:-

gridNorth.png