1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    13
    Vote Rating
    0
    minchen is on a distinguished road

      0  

    Default Accordion layout on existing HTML markup

    Accordion layout on existing HTML markup


    I have a need to use ExtJS accordion layout on an existing HTML markup below:

    <body>
    <div id="reportWrapper">
    <div id="reportTabContent" style="overflow: hidden; position:absolute; width:100%;">
    <div id="panel1"></div>
    <div id="panel2"></div>
    </div>
    </div>
    </body>

    I have tried the following Javascript code:

    Ext.onReady(function(){

    // initialize
    Ext.QuickTips.init();

    Ext.BLANK_IMAGE_URL = '../ext-3.2.1/resources/images/default/s.gif';

    ////////////////////////////////////////////////////////////////////////////////
    // Accordion Panel Stuff ///////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////

    var panOne = new Ext.Panel(
    {
    title:'Panel One',
    renderTo: 'panel1',
    frame: false,
    border: false,
    html: '<b>Number One!</b>'
    });

    var panTwo = new Ext.Panel(
    {
    title:'Panel Two',
    renderTo: 'panel2',
    frame: false,
    border: false,
    html: '<b>Number Two!</b>'
    });


    var accordion = new Ext.Panel(
    {
    title:'Accordion Layout',
    width: 500,
    height: 500,
    closable: false,
    layout: 'accordion',
    applyTo: 'reportTabContent', // render the grid to the specified div in the page
    });

    });

    But it is not working properly. Is it possible? If so, how should I do this?

    Thanks for the help.

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    13
    Vote Rating
    0
    minchen is on a distinguished road

      0  

    Default


    Anybody can help? Or is it doable? We need to do this in our project because we are using Wicket and ExtJS to develop our web UI. Any help will be greatly appreciated.

  3. #3
    Sencha User
    Join Date
    Aug 2009
    Posts
    480
    Vote Rating
    1
    plalx has a spectacular aura about plalx has a spectacular aura about

      0  

    Default


    Take a look at the applyTo and contentEl config options.

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    13
    Vote Rating
    0
    minchen is on a distinguished road

      0  

    Default


    Thanks scarsick. By changing the code to

    var accordion = new Ext.Panel(
    {
    title:'Accordion Layout',
    width: 500,
    height: 500,
    closable: false,
    layout: 'accordion',
    applyTo: 'reportWrapper', // render the grid to the specified div in the page
    contentEl: 'reportTabContent',
    });

    });
    It works fine now.

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    13
    Vote Rating
    0
    minchen is on a distinguished road

      0  

    Default


    I spoke too early on this. It is still not working properly. My panels cannot be expanded or closed. See attached images.accordion.jpg

  6. #6
    Sencha User
    Join Date
    Aug 2009
    Posts
    480
    Vote Rating
    1
    plalx has a spectacular aura about plalx has a spectacular aura about

      0  

    Default


    Did you specified collapsible: true ?

    http://docs.sencha.com/ext-js/3-4/#!...fg-collapsible

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    13
    Vote Rating
    0
    minchen is on a distinguished road

      0  

    Default


    I put collapsible:true to my Panel One and Panel Two, but it is still not behaving like Accordion layout. See screenshot attached. If it is Accordion layout, Panel Two should be pushed to the bottom of the parent Accordion Layout panel, leaving all the space to Panel One.
    accordion.jpg

  8. #8
    Sencha User
    Join Date
    Aug 2009
    Posts
    480
    Vote Rating
    1
    plalx has a spectacular aura about plalx has a spectacular aura about

      0  

    Default


    Sorry, I read this too quickly... I think the way you want to organize this is like that:

    Code:
    //Pseudo-code
    AccordionPanel = {
        applyTo: 'accordionContainerDiv',
        layout: 'accordion',
        items: [
            { contentEl: 'firstPanelContent' },
            { contentEl: 'secondPanelContent' }
        ]
    }

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    13
    Vote Rating
    0
    minchen is on a distinguished road

      0  

    Default


    Sorry scarsick. I am still a newbie to ExtJS, and didn't quite digest what you suggested. Are you suggesting that I should have a HTML like following:

    <body>
    <div id="reportWrapper">
    <div id="report" style="overflow: hidden; position:absolute; width:100%;">
    <div id="panel1Wrapper">
    <div id="panel1"></div>
    </div>
    <div id="panel2Wrapper">
    <div id="panel2"></div>
    </div>
    </div>
    </div>
    </body>

    Then what should I modify for my corresponding javascript attached in previous thread? Also, is it possible not to specify "items" configuration for an Accordion panel since they are already specified in existing HTML?

  10. #10
    Sencha User
    Join Date
    Aug 2009
    Posts
    480
    Vote Rating
    1
    plalx has a spectacular aura about plalx has a spectacular aura about

      0  

    Default


    Hi, I am not sure of what I will say, because I have never used ExtJS with existing HTML element, and normally it is not really the path you want to go, but if that's what you need to do, I think it can't work the same way jQuery does it, so the children won't get added automatically based on the panel content. So I think the way to go would be something like this:

    HTML:
    Code:
    <div id="accordion-panel"></div>
     <div id="panel1-content">
      First panel content
     </div>
     <div id="panel2-content">
      <div style="border: 1px solid #FFFF99; background-color:#FFFFCC; padding: 10px;">
       Second panel content
      </div>
     </div>
     <div id="panel3-content">
      Third panel content
     </div>

    JS:
    Code:
     Ext.onReady(function() {
      new Ext.Panel({
       title: 'Accordion Panel',
       applyTo: 'accordion-panel',
       layout: 'accordion',
       width: 200,
       autoHeight: true,
       defaults: {
        autoHeight: true,
        bodyStyle: 'padding: 10px;'
       },
       items: [
        { 
         title: 'First Panel',
         contentEl: 'panel1-content'
        },
        { 
         title: 'Second Panel',
         contentEl: 'panel2-content'
        },
        { 
         title: 'Third Panel',
         contentEl: 'panel3-content'
        }
       ]
      });
     });

Thread Participants: 2

Tags for this Thread