PDA

View Full Version : scroll is not displaying when i add more items



kamalakarreddy vancha
10 Dec 2014, 4:01 AM
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

chamacs
10 Dec 2014, 2:11 PM
A couple things:
1. Please post code in code blocks. Makes it easier to read.

Code

2. Problem may be that you are putting the "menu" in a toolbar. You may just want to put it directly in the west panel as items, as seen here in this fiddle:

https://fiddle.sencha.com/#fiddle/ess

(I used your code as a basis. You do have excessive nesting of panels. I removed some, but it is still slow to load because of this. Also made the container small on purpose to show a scroll which dynamically grows as you expand some of the panels.)

Hope this helps.

kamalakarreddy vancha
16 Dec 2014, 9:19 PM
Thanks..
now it is working fine...
And
Here i want do one thing.
i.e
here am adding the menu to panel items.
If one of the panel doesn't have the menu items then i want to hide that panel means i don't want to show that panel.
i.e
Which panel have the menu items that is only i want to display.
here i want to tell one thing.
First i am adding the all the panels with menu items.
When ever i am opening the appication based on user some menu items are not displayed.
Up to here working fine.
Now which panel doesn's have menu items(In
https://fiddle.sencha.com/#fiddle/ess
Event Notification and Invoice panels doesn't have the menu. these panels i want to hide.), i want to hide that panel.
Help me in this...



Thanks In Advance

chamacs
17 Dec 2014, 5:57 AM
I've updated the fiddle to hide menu panels with no menu items.

https://fiddle.sencha.com/#fiddle/ess

(https://fiddle.sencha.com/#fiddle/ess)

kamalakarreddy vancha
18 Dec 2014, 5:23 AM
Hi..
Thanks for your reply...
If i add this in Event Notification Panel


{
xtype:'menu',
"floating": false,
items:[{
text:'GateMonitoring1',
hidden:true,
iconCls: "gate_monitoring_icon",
handler: function () {
}
},{
text:'GateMonitoring2',
hidden:true,
iconCls: "gate_monitoring_icon",
handler: function () {
}
}]
}


then menu's hiding but panel displaying.
At this time i want to hide the panel.
In my case am writing hidden:(some code) to every menu item.
we are sending some code = true in some cases dynamically.
In this case i want hide the panel.


Thanks In Advace...

kamalakarreddy vancha
23 Dec 2014, 4:01 AM
suggest me anyone.....