PDA

View Full Version : Accordion in Dialog is not working



dillenger
13 Jul 2007, 8:04 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>

jsakalos
22 Jul 2007, 4:03 PM
You've posted only html. Can you post also your javascript?