Ext Accordion Widget Example, Ver.: 1.0 (Latest: 1.0.1)
The Accordion can be used anywhere in the web page mainly (but not only) for:
... or anything else the talented web designers can invent and produce.
All panels are draggable and once undocked also resizable by default. You can try it by dragging a panel out of the Accordion dock. If you do not want this feature you can turn it off.
You can drag undocked panels back to the Accordion dock.
There are many configuration options to customize look and functionality for your needs, e.g. shadows, show pin, animation, various modes (undockable, independent) to name a few.
You can switch on/off some of them in the above toolbar.
Panels and dock can also keep their states (size, position, expanded, etc.) between page reloads.
I have developed the Accordion because I needed it for my main project and not for profit. Only then I decided to share it with the community.
However, the developing and maintaining of this component takes time and effort so if you find it useful please donate to make future development possible.
This is quickly-setup-page to show the status of the development of the Ext.Accordion extension class, to allow the potential users to get the feel-and-touch of accordion and panels and to find bugs, if any.
The ExtJS is the JavaScript library and it is used as a foundation for this example to work. For more information see Ext JS - JavaScript Library
This example is discussed in details in this forum thread. I have removed the standalone InfoPanel example as independent panels are now shown in the Panels tab. (If you navigate to infopanel.html your browser will be redirected back here.)
This howto is for those of you who would like to use the Accordion in your page. I'll write it as for beginners; I believe the old Ext-ers will forgive me if I'll stress the basics here. And you, eager beginners, be prepared to explore the new worlds of web design you maybe haven't even dreamed could exist.
Here we go:
For this, navigate to Download Ext JS Library page and download the Ext 1.0.1a version.
To do this step navigate to Introduction to Ext and execute steps you find there up to the "Congratulations!" message box. I would strongly advice to read this tutorial fully but, for the impatient, it's enough to now that Ext is installed correctly in this step.
Install Ext to extjs/ directory under your server root directory
For this, download the following files:
Place Accordion files into extjs/examples directory and icons files in the the img/silk/icons directory under your server root directory.
That's all folks!
Now it's time to put the Accordion to your page taking this running example as a model. You can also see this forum thread to see the discussion on the Accordion and to find out the outstanding issues/bugs and/or future plans.
Last but not least: If you find this component useful, donate please to make the future development of the Accordion possible. If you decide to donate use jsakalos at seznam dot cz as recipient's e-mail address. The amount is up to you. Thank you.
Happy coding!
Contact: If you want to contact me the best way is on the Ext JS Forums or via the Forum Private Messaging.
This page shows independent panels, panels without an Accordion, and various methods of panel creation. The creation method of each panel is explained in its body. Panel that comes last in the DOM is always the topmost panel.
Markup:
<div>5. Panel</div>
<div>
<div class="text-content">
This text.
</div>
</div>
Code:
new Ext.InfoPanel('ipanel-5', {
useShadow: true
, draggable: true
, duration: 1.0
});
Markup:
<div id="ipanel-7-body">
<div class="text-content">
<h3>7. Auto-created...</h3>
<p> </p>
<p>Markup:</p>
...
</div>
</div>
Code:
new Ext.InfoPanel({
title: '7. Auto-created...'
, id: 'ipanel-7'
, desktop: 'panels-tab'
, bodyEl: 'ipanel-7-body'
, autoCreate: true
, draggable: true
, useShadow: true
, resizable: true
});
This is the example of the fixed height Accordion. Panels undocked from this Accordion are local to the tab "Fixed height"; they hide when you change the tab. Left-hand panels are global to the page; they stay visible when you change the tab.
The Accordion is resizable down and right.
<div id="acc2-ct"> <div id="acc2-wrap"> <div id="acc2-body"> </div> </div> </div>
acc2-ct is outermost container div that should have size and it is the div which is resized. Its id is used in new Ext.Accordion('acc2-ct', {...});
acc2-wrap is div that will be wrapped with nice surrounding. This div should have a border if you want one and its id is passed as wrapEl:'acc2-wrap' to the Accordion configuration.
acc2-body should not have any border nor margin and it is passed as body:'acc2-body' to the Accordion configuration. Panels are direct children of this division.
You are visitor number 2.7350860403798E+45 since 07 Mar 10.
