From Learn About the Ext JavaScript Library

Contents 1 Description 2 InfoPanel Uses 3 Accordion Uses 4 InfoPanel Usage 5 Accordion Usage 6 Changelog 7 Screenshots

Description

The InfoPanel widget is a (small) window that can be collapsed when only the title bar is visible or expanded. It can be embedded in a web page or it can have window-like behavior: floating above the content, draggable, resizable.

Accordion groups panels together making them aware of each other. Expand one, another collapses. Panels can be reordered within Accordion by drag & drop or can be moved out. Accordion can be placed in a layout, in a dialog or it can be embedded in page content.

InfoPanel Uses

InfoPanel can have virtually any content even dynamically loaded by Ajax calls from the server. It is suitable for any information that is not necessarily visible at all times, like:

• theme selectors
• login dialogs
• options forms
• calculators
• help information
• ... and many others

Accordion Uses

• page navigation tool
• pool of panels for drag out
• toolbox
• table of contents
• ... and many others

InfoPanel Usage

Ext.onReady(function() {
    // create panel
    var panel = new Ext.ux.InfoPanel('panel-container', {
        icon: '../icons/home.png'
    });
});

Consult the documentation in the source code for other configuration options.

Accordion Usage

Ext.onReady(function() {
    // create accordion
    var accordion = new Ext.ux.Accordion('accordion-container', {
        fitHeight: true
    });
 
    // create and add panel 1
    var panel1 = accordion.add(new Ext.ux.InfoPanel('panel1-container', {
        icon: '../icons/wrench.png'
    }));
});

Consult the documentation in the source code for other configuration options.

Changelog

• Ver.: 1.0.1 current stable version
• Ver.: 1.1-beta1 changes are summarized in this post.

Screenshots