Results 1 to 6 of 6

Thread: scroll is not displaying when i add more items

  1. #1

    Default 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
    Attached Images Attached Images

  2. #2
    Sencha Premium User
    Join Date
    Mar 2011
    Posts
    287
    Answers
    35

    Default

    A couple things:
    1. Please post code in code blocks. Makes it easier to read.
    Code:
    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.

  3. #3

    Default

    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

  4. #4
    Sencha Premium User
    Join Date
    Mar 2011
    Posts
    287
    Answers
    35

    Default

    I've updated the fiddle to hide menu panels with no menu items.

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


  5. #5

    Default

    Hi..
    Thanks for your reply...
    If i add this in Event Notification Panel

    Code:
    {
                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 hiddensome 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...

  6. #6

    Default

    suggest me anyone.....

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •