1. #1
    Sencha User
    Join Date
    Nov 2008
    Posts
    17
    Vote Rating
    0
    iteamsoftware is on a distinguished road

      0  

    Default Accordion Panel Layout

    Accordion Panel Layout


    Hi.
    I have an issue and I don't know how to deal with it.
    I have a viewport that holds: top, left, right and bottom.
    On top I have some text, on the left I have the menu, on the right is the main content and the bottom holds some description.
    My issue is with the menu from left.
    The menu is formated from an Accordion panel with menu tree.
    If I set the left side to not be collapsible everything it's ok, meaning: the menu tabs are ok in height. If I click on the first tabemenu - all the tabs are positioned at the very bottom. If I click the second tab the others tabs are posiotned at the very top (the firts one) and the others at the very bottom. Which is great - and how I wanted.
    But if I set the left menu collapsible - the tabs are positioned right under the end of the menu tree and not at the bottom. So if I'm on the first tab - all the other tabs are just below the menu tree - and not at the very bottom as it's when is not collapsible. Just like autoHeight is set to tru - but it's not it's false. Also the first menu doesn't load (it's loaded dynamicaly by ajax and xml).
    I try everything and I can't seams to get ok. On extjs 3.x it's working as it should - but I need the 2.x.
    I try deferrendRender = false, forceFit and everything.
    I hope I was clear enought.
    Any ideea ?
    Thank you
    I try to setup

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Your description is not completely clear. Can you post the layout code for your menu?

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Posts
    17
    Vote Rating
    0
    iteamsoftware is on a distinguished road

      0  

    Default thanks

    thanks


    Here is my code: (I also attached 3 screenshots)
    Master menu holder

    var RIAMeniu = new Ext.Panel({
    region:'west',
    id: 'ria_app_main_menu',
    title: appMenuTitle,
    split: false, autoShow: true,
    width: appMenuWidth,
    minSize: 175, maxSize: 500,
    collapsible: appMenuCollapse,
    collapsed: appMenuON,
    margins:'0 0 0 0',
    layout:'accordion',
    forceLayout: true, viewConfig: { forceFit: true },
    tools: [{
    id: 'refresh',
    tooltip: 'Actualizare',
    handler: function()
    { window.location.reload(); }
    },
    {
    id: 'appdologout',
    tooltip: 'Deconectare',
    handler: function()
    { Ext.MessageBox.show({
    title:'Confirmatii parasirea aplicatie?',
    msg: 'Sunteti pe cale sa parasiti aplicatia.<br>Confirmati acest lucru?',
    buttons: Ext.MessageBox.YESNO,
    fn: function(btn)
    { if (btn == 'yes' || btn == '1')
    { usr.doLogout(); };
    }, icon: Ext.MessageBox.QUESTION }); }
    }],
    layoutConfig:{ animate:false },
    items: null });

    The items are added dynamicaly with:
    RIAMeniu.add({
    layout: 'fit',
    title: meniuTitlu,
    border: false,
    iconCls:'nav',
    forceLayout: true, viewConfig: { forceFit: true }, layoutConfig:{ forceFit: true },
    items: [{
    xtype: 'treepanel',
    bodyStyle: 'border: 0px;',
    region: 'center',
    margins: '2 2 0 2',
    autoScroll: true,
    layout: 'fit',
    rootVisible: false,
    forceLayout: true,
    singleExpand: appMenuSubMexp,
    root: new Ext.tree.AsyncTreeNode(),
    loader: new Ext.app.xmlReader({
    dataUrl: thisMenuLink,
    requestMethod: 'GET',
    nocache: true
    }),
    listeners: {
    'render': function(tp){
    tp.on('click', function(node, tree){
    thisNode = node.attributes;
    if (thisNode.action && thisNode.action.length > 0)
    { eval(thisNode.action); }
    else
    { if (thisNode.idp && thisNode.idp.length > 1 && thisNode.url && thisNode.url.length > 1)
    { loadTAB(thisNode.idp, thisNode.url, thisNode.parametrii, thisNode.titlul, '', ''); }; }; }) }
    }
    }]
    });

    The file menu_not_collabsible.JPG shows how I wanted to have - both with collapse on and collapse off.
    Thank you very much.
    Attached Images

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

  5. #5
    Sencha User
    Join Date
    Nov 2008
    Posts
    17
    Vote Rating
    0
    iteamsoftware is on a distinguished road

      0  

    Default


    Thanks.
    I try both solutions. Indeed now using the paches - in collapsible state - the firts panel i's render ok. Which is good.
    But the height of the panels in collapsible state it's still not as it should. Not on the bottom - but under the tree panel menu.
    Hmm ... I guess I'll stick to collapsible - false.
    Thank you very much for your time.

Similar Threads

  1. Accordion layout and panel autoheight
    By dragec in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 21 Sep 2010, 3:14 AM
  2. Way to keep at least one panel in an accordion layout always expanded?
    By Gjslick in forum Ext 2.x: Help & Discussion
    Replies: 16
    Last Post: 8 Mar 2010, 2:51 PM
  3. Replies: 6
    Last Post: 4 Mar 2009, 11:31 AM
  4. accordion panel on layout
    By organic in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 17 Oct 2007, 10:43 PM

Thread Participants: 1