Question

I have a basic ExtJS 4.0 accordion. I want to have an inline link within the text of one panel that will close that panel and open another.

In the example below, the link in Panel 1 should open Panel 2. What sort of click function would work here?

Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
layout:'accordion',
layoutConfig: {
    // layout-specific configs go here
    titleCollapse: false,
    animate: true,
    activeOnTop: true
},
height: 300,
width: 400,
items: [{
    title: 'Panel 1',
    id: 'p1',
    html: 'Text goes here. <p><a id="linkP2" href="#">Go to panel 2</a></p>'
},{
    title: 'Panel 2',
    id: 'p2',
    html: 'Panel content!'
},{
    title: 'Panel 3',
    id: 'p3',
    html: 'Panel content!'
}],
renderTo: Ext.getBody()
});​

Answer 1

I ended up finding a rather simple solution:

<a id="linkP2" href="javascript:onClick=Ext.getCmp(\'p2\').expand();">Go to panel 2</a>

Ext.getCmp.expand allows the selection of a certain ID within the accordion.