What event to listen on accordion panel change in

Question

What event to listen when a accordion panel is clicked and becomes visible? Any code example will be great help. Thanks!

Answer 1

expand; see:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-event-expand

Here is a working code snippet of mine you could substitute for the items in the example code above, that is working for me:

items: [{
    title: 'Watch Folder',
    html: 'Watch Folder'
},{
    title: 'Saved Search',
    html: 'Saved Search',
    listeners: {
        expand: function() {
            console.log('saved-search/expand');
        }
    }
},{
    title: 'Search History',
    html: 'Search History'
},{
    title: 'Special',
    html: 'Special'
}]

Answer 2

In ExtJS, Accordion is a layout which we will be using on Panel. Here is a sample example from sencha docs.(As you didn't mention version of ExtJS, I am assuming v4.0) :

Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 300,
layout:'accordion',
defaults: {
    // applied to each contained panel
    bodyStyle: 'padding:15px'
},
layoutConfig: {
    // layout-specific configs go here
    titleCollapse: false,
    animate: true,
    activeOnTop: true
},
items: [{
    title: 'Panel 1',
    html: 'Panel content!',
    listeners: {
        afterrender: function(thisCmp, eOpts) //(Ext.Component this, Object eOpts ) {
            // do what you want to do here
        }
    }
},{
    title: 'Panel 2',
    html: 'Panel content!'
},{
    title: 'Panel 3',
    html: 'Panel content!'
}],
renderTo: Ext.getBody()
});

All events associated with Panel are applicable here. Check out usage of these events here on sencha docs.