View Full Version : How to get a Checkbox action to open accordion panel

31 Oct 2012, 9:06 PM
Another issue that I'm having is trying to open an accordion panel when I check a checkbox. I tried using the show() method but it doesn't seem to work. Anyway here's some back ground on this issue: when I go to the tab that this exists in the checkboxes are on the left and the main panel on the right have a set of 4 accordion panels which match four checkboxes. The first accordion panel is set active so on clicking on the tab for this view you see the first tab open and the first checkbox clicked.

So now when I click on the second checkbox nothing happens. What I'm trying to get is eventually all accordion panels that have a checkbox checked to be open in the main right hand panel, kind of like the multi:true view would be except only as the user selects it.

this is the function that is in the controller that will catch the action from the checkbox but it is at this point I'm not sure what method will open the accordion panel leaving the initial one open - unless it is unchecked.

checkedValueOne: function(chk){
//console.log("Made it!");

layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true,
// multi:true

hcm xtype is just a panel of a flex swf.

Ext.define('M.view.mission-control-hcm' ,{
extend: 'Ext.Panel',
alias : 'widget.hcm',



Anyway any help would be appreciated.

31 Oct 2012, 9:38 PM
You need to use expand/collapse rather than show/hide.

1 Nov 2012, 4:39 AM
Not sure how that works as I don't see an expand method available. Can you give me an example or a little more explanation?

1 Nov 2012, 4:52 AM
Okay - I see it inherits the expand from panel and it works but two things it wont keep other panels open and how do I collapse on an uncheck? Currently it is just seeing the button action as both checked and unchecked.

1 Nov 2012, 5:01 AM
To have multiple panels open at once you need multi: true on the layout.

To collapse a panel use the collapse method rather than expand.

What do you mean by 'button action'? I thought you were using a checkbox? It depends a little on how you're reacting to the change but for a change event or handler you should be passed the checked state as one of the function parameters. You could alternatively just call getValue on the checkbox to get whether it is currently checked.

1 Nov 2012, 5:20 AM
The multi:true deal will open them all at startup. Do I have to use this then write something to close all but the first one which is checked?

Sorry on button action I meant the checkbox being checked and unchecked. I will try the getValue and see if that works for this.

1 Nov 2012, 5:23 AM
The multi:true deal will open them all at startup. Do I have to use this then write something to close all but the first one which is checked?

Just put collapsed: true on the others.

1 Nov 2012, 5:40 AM
Thanks for your help. Any chance I can get some help with dynamically generating tabs question that I have out there?