PDA

View Full Version : Help: Accordion in Dialog Isn't Working



dillenger
13 Jul 2007, 7:27 AM
I cannot get the accordion within the dialog to work at all. I think I have all the right code but I could be missing something really simple. I think what I am missing is just how to call the dialog box. The button that is in the example is not showing up.

Here are my includes:

<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="accordion-example.css">
<link rel="stylesheet" type="text/css" href="accordion.css">
<link rel="stylesheet" id="theme" href="extjs/resources/css/ytheme-vista.css" />
<script type="text/javascript" src="accordion.js"></script>
<script type="text/javascript" src="extjs/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="extjs/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="Ext.ux.Accordion.js"></script>

Here is the code for the hidden dialog box:

<body>

<!-- Dialog container (it has to be direct body child otherwise modal doesn't work) -->
<!--{{{-->
<div id="acc-dialog" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Accordion dialog</div>
<div id="dialog-acc-container" class="x-dlg-bd">

<div id="dpanel-1">
<div>1. Description</div>
<div>
<div class="text-content">
You can put accordion also into a standard Ext.BasicDialog.
It's fairly easy; this example shows how to do it.
</div>
</div>
</div>

<div id="dpanel-2">
<div>2. Ext 2.0 now!</div>
<div>
<div class="text-content">
This way you can create an Ext 2.0 like Accordion window
right now before Ext 2.0 is released.
</div>
</div>
</div>

<div id="dpanel-3">
<div>3. Features</div>
<div>
<div class="text-content">
The features of the Accordion placed in a dialog are in no way limited.
You can undock and dock back panels also from this dialog. Try it!
</div>
</div>
</div>
<!--
<div id="dpanel-4">
<div>4. Sticky note</div>
<div>
<textarea id="sticky-note">You can type here...</textarea>
</div>
</div>
-->
</div>
</div>
<!--}}}-->
<div id="btn-show-dlg"></div>

tryanDLS
13 Jul 2007, 7:52 AM
The Accordion component was not developed by Ext and is not part of the base Ext framework - please use the thread in the User Extentions forum or start a new thread there.

jsakalos
14 Jul 2007, 10:18 AM
What you post here is just html markup. You also have to have javascript application that creates dialogs, buttons, panels and accordion.

The best is to develop in Firefox/Firebug to see if you get any errors.

nobin
13 Oct 2011, 2:54 AM
https://github.com/mitchellsimoens/Ext.layout.AccordionLayout