Introduction

This page is about the InfoPanel and Accordion javascript classes and its purpose is to allow the potential users to get the feel-and-touch of the user interface they provide. It contains also step by step instructions on how to integrate the Accordion to a web page.

The Ext JS is the javascript library and it is used as a foundation for InfoPanel, Accordion and this example to work. For more information see Ext JS - JavaScript Library

These classes and example are discussed in details in this Ext JS Forum thread.

If you've already been here Ctrl+Click the browser's Reload/Refresh button.

When I update sources sometimes I have to hard-refresh several times!

Visit also Accordion Preview Page, there are nice new features there and Saki's Extensions, Plugins and Know-How page.

Changes from version 1.0 to 1.0.1

1. Namespace change

The version 1.0 class names were Ext.InfoPanel and Ext.Accordion what was directly under the root name of the Ext JS Library: Ext. This might cause name conflicts in the future. After discussion with author of Ext JS Library Jack Slocum I have decided to put them in the separate name space Ext.ux. ux was recommended by Jack and stands for user extensions.

New names of classes are now Ext.ux.InfoPanel and Ext.ux.Accordion and new file names are Ext.ux.InfoPanel.js and Ext.ux.Accordion.js.

Users upgrading from version 1.0 will have to change include links in the heads of pages to read:

<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="Ext.ux.Accordion.js"></script>

However, they do not need to rewrite the code of their applications but they can add next lines at the beginning of their code as there is no namespace conflict yet:

Ext.InfoPanel = Ext.ux.InfoPanel;
Ext.Accordion = Ext.ux.Accordion;
Ext.AccordionStateManager = Ext.ux.AccordionStateManager;

These lines are not required for new users who have not written their applications yet.

2. Example directory change

3. Code changes

• Fixed bug in InfoPanel that prevented grid to show.
• New InfoPanel destroy method and destroy event

How to start with Ext Accordion

Step by step instructions

The latest stable version of Accordion is 1.0.1

This howto is for those of you who would like to use the Accordion in their 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:

1. Download and install Ext JS Library

For this, navigate to Download Ext JS Library page and download the Ext 1.0.1a or 1.1 Beta 1 version.

2. Install Ext JS Library on your server

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 know that Ext is installed correctly in this step.

Install Ext to extjs/ directory under your server root directory

3. Make this example working on your server (unchanged)

For this, download the following files:

• This page (right-click on the page/View Page Source/Save As...
• JavaScript Accordion Application
• Style Sheets for Accordion
• Ext.ux.InfoPanel Extension Class
• Ext.ux.Accordion.js Extension Class
• Icons

Place Accordion files into accordion/ directory and icons files in an any directory under your server root directory. Then edit accordion.js file and set variable iconPath to the directory where you have installed icons. Do not forget trailing slash.

Remove please the line from the bottom of the html page as it is only for statistical purposes and it has nothing to do with InfoPanel/Accordion. Remove this line:

<?@require("stats.php")?>

4. Navigate to http://yourdomain.com/accordion/accordion.html

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 Ext JS 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. The amount is up to you. Thank you.

Happy coding!

How to integrate Ext Accordion to a page

1. Install the Ext JS - Javascript Library

1.1 Download and unzip Ext JS

Download the Ext JS library and unzip it somewhere under the directory of your server root. I will assume that Ext JS is under the extjs/ directory in this howto.

1.2 Add links to the head

Locate the <head> section of your page and add the following links into it:

<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./accordion.css">
<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>

Note: In this howto, I will assume that your page is one directory under your server root (let it be accordion/ here.) If your page is somewhere else you need to adjust relative paths above. For example, if your page is directly under the server root then replace two dots above with one dot. If it is deeper than one directory then your links should read: src="../../../extjs/.....".

1.3 Create file accordion.js

// Ext Accordion Application

Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';

Ext.onReady(function() {
  alert("Ext installed successfully");
});

// end of file

1.4 Include accordion.js

Add the following line just before the </body> tag:

<script type="text/javascript" src="accordion.js"></script>

1.5 Verify Ext installation

Navigate your browser to http://yourdomain.com/accordion/yourpage.html. You should get alert with text "Ext installed successfully". If you don't the most probable reason is that paths in the above links are wrong especially if you installed Ext in a different directory. Adjust links and try again. If that doesn't help then follow instruction in Introduction to Ext.

2. Install Accordion files

2.1 Download and copy files

Download following files from this page and copy them to the accordion/ directory:

• Ext.ux.InfoPanel.js
• Ext.ux.Accordion.js
• accordion.css

2.2 Add links to the head

Add the following lines just before the </head> tag:

<link rel="stylesheet" type="text/css" href="accordion.css">
<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="Ext.ux.Accordion.js"></script>

2.3 Add testing lines to the accordion.js

Adjust the accordion.js file to read the following:

// Ext Accordion Application

Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';

Ext.onReady(function() {
  var a = new Ext.ux.Accordion({autoCreate:true});
  var p = new Ext.ux.InfoPanel({autoCreate:true});
  if(a && p) {
    alert("Accordion installed successfully");
  }
});

// end of file

2.4 Verify the Accordion installation

Navigate your browser to http://yourdomain.com/accordion/yourpage.html. You should get alert with text "Accordion installed successfully".

3. Create Accordion with two panels

3.1 Write html markup

Locate a place in your page where you want to put the Accordion and write there the following HTML markup:

<div id="acc-ct" style="width:200px;height:300px">
  <div id="panel-1">
    <div>My first panel</div>
    <div>
      <div class="text-content">My first panel content</div>
    </div>
  </div>
  <div id="panel-2">
    <div>My second panel</div>
    <div>
      <div class="text-content">My second panel content</div>
    </div>
  </div>
</div>

3.2 Create Accordion

Adjust the accordion.js file to read the following:

// Ext Accordion Application

Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';

Ext.onReady(function() {
  // create accordion
  var acc = new Ext.ux.Accordion('acc-ct', {
    fitHeight: true
  })

  // create panel 1
  var panel1 = acc.add(new Ext.ux.InfoPanel('panel-1', {
  }));
  
  // create panel 2
  var panel2 = acc.add(new Ext.ux.InfoPanel('panel-2', {
  }));
});

// end of file

3.3 Verify the Accordion

Navigate your browser to your page. You should see your first Accordion with two panels and you should be able to expand/collapse the panels.

4. Congratulations!

Now that you have your Accordion with two panels it's good time to add there your content, add more panels, add icons to panel titles, and so on. Accordion and InfoPanel have many configuration options so it's worth to study them as then you can adjust Accordion and Panels to your liking.

Just to help beginners here is the HTML markup with no content but Accordion and accordion.js file that I used while writing this tutorial to check that I'was writing true.

HTML markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ext Accordion Howto</title>
  <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
  <link rel="stylesheet" type="text/css" href="./accordion.css">
  <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>
  <link rel="stylesheet" type="text/css" href="accordion.css">
  <script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
  <script type="text/javascript" src="Ext.ux.Accordion.js"></script>
</head>
<body>
<div id="acc-ct" style="width:200px;height:300px;border:1px solid silver">
  <div id="panel-1">
    <div>My first panel</div>
    <div>
      <div class="text-content">My first panel content</div>
    </div>
  </div>
  <div id="panel-2">
    <div>My second panel</div>
    <div>
      <div class="text-content">My second panel content</div>
    </div>
  </div>
</div>
<script type="text/javascript" src="accordion.js"></script>
</body>
</html>

accordion.js:

// Ext Accordion Application

Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';

Ext.onReady(function() {
  // create accordion
  var acc = new Ext.ux.Accordion('acc-ct', {
    fitHeight: true
  })

  // create panel 1
  var panel1 = acc.add(new Ext.ux.InfoPanel('panel-1', {
  }));

  // create panel 2
  var panel2 = acc.add(new Ext.ux.InfoPanel('panel-2', {
  }));
});

// end of file

Contact: If you want to contact me the best way is on the Ext JS Forums or via the Forum Private Messaging.