scroll is not displaying when i add more items

HI...

here i created viewport. Viewport devided into west, center regions.

In the west region panel i added the menu data to tbar(tbar: menuData).

Menu displaying in the west panel(Capture2).

But...

If i add the more menu's in my menu file scroll is not appearing means remaining menu's are not displaying.

Here is my viewport file code...

Ext.onReady(function () {

Ext.getBody().mask(Modules.Msgs.loading);

var menuData = ajaxCallsForExternalUsrDtlsNMenu();

if(!menuData){//Returning false below if no menu data received

if(Modules.GlobalVars.distributionEnv){

alert('No User or Menu data received from server');

}

return false;

}

Ext.getBody().unmask();

Ext.QuickTips.init();

//Creating the veiwpor below

new Ext.Viewport({

layout: "border",

items: [{

xtype: "panel",

autoScroll:true,

layout: 'border',

items: [{

xtype:'panel',

region:'west',

title:'Menu',

tbar: menuData, // Here i adedd the menu data.

id:'viewportWestPanelId',

collapsible:'true',

cls: 'menuPanelBgColor',

width:'17%',

autoScroll:true

},{

xtype: 'tabpanel',

id:'viewportParentTabPanelId',

height: 400,

region: 'center',

activeTab: 0,

items: [{

xtype: 'panel',

region: 'center'

}]

}]

}]

});

});

Here in ajaxCallsForExternalUsrDtlsNMenu() i am calling the menu.js file.

Menu.js file...

[{

"xtype":"panel",

"width":"100%",

"margin": "-1px 0px 0px 0px",

"id":'viewportWestMenuPanelId',

//autoScroll: true,

"defaults": {

"bodyStyle": "background:#d1d2d4; padding:0px 0px 0px 0px"

},

"layout": {

"type": "vbox",

"animate": true

},

items:[{

"xtype": "panel",

"cls": "menuPanel",

"width":'100%',

collapsible:true,

"title":'Quick Find',

"items": [ ]

},{

"xtype": "panel",

"cls": "menuPanel",

"width":'100%',

collapsible:true,

"title":'Multi Search',

"items": []

},{

"xtype": "panel",

"cls": "menuPanel",

"width":'100%',

"collapsed": true,

collapsible:true,

"title":'Vessel Documentation',

"items": [{

"xtype": "menu",

"floating": false,

"items": [{

text:'voyageMonitoring',

iconCls: "sub-main-folder",

handler: function () {

}

}]

}]

},{

"xtype": "panel",

"cls": "menuPanel",

"width":'100%',

"collapsed": true,

collapsible:true,

"title":'Booking',

"items": [{

xtype:'menu',

"floating": false,

items:[{

text:'ExportBooking',

handler: function () {

}

}]

}]

},{

"xtype": "panel",

"cls": "menuPanel",

"width":'100%',

"collapsed": true,

collapsible:true,

"title": 'Gate',

"items": [{

xtype:'menu',

"floating": false,

items:[{

text:'GateMonitoring',

iconCls: "gate_monitoring_icon",

handler: function () {

}

}]

}]

},{

"xtype": "panel",

"cls": "menuPanel",

"width":'100%',

"collapsed": true,

collapsible:true,

"title":'ReleaseOrder',

"items": [{

xtype:'menu',

"floating": false,

items:[{

text:'ReleaseOrder',

iconCls: 'generate_btn',

handler: function () {

}

}]

}]

},{

"xtype": "panel",

"cls": "menuPanel",

"width":'100%',

"collapsed": true,

collapsible:true,

"title":'Container',

"items": [{

xtype:'menu',

"floating": false,

items:[{

text:'itemMenu',

iconCls: "itemMenu",

handler: function () {

}

}]

}]

},{

"xtype": "panel",

"cls": "menuPanel",

"width":'100%',

"collapsed": true,

collapsible:true,

"title":'Event Notofication',

"items": [{

xtype:'menu',

"floating": false,

items:[]

}]

},{

"xtype": "panel",

"cls": "menuPanel",

"width":'100%',

"collapsed": true,

collapsible:true,

"title": 'Invoice',

"items": [{

xtype:'menu',

"floating": false,

items:[]

}]

}]

}]

Here everything is working fine but i am not getting the scroll when i add more menu's in my menu.js file.

Help me in this...

Thanks In Advance

Kamalakar

scroll is not displaying when i add more items