ExtJs手风琴布局崩溃

Question

I have created an accordion layout and added a few panels as shown to it. It is working fine.

var changePasswordDlg = new MaPPE.changePasswordDlg();
var lostPasswordDlg = new MaPPE.lostPasswordDlg();
var personalInfoDlg = new MaPPE.personalInfoDlg();
var selectLangDlg = new MaPPE.selectLangDlg();
var visibilityDlg = new MaPPE.visibilityDlg();

var config = {
    layout: 'accordion',
    title: '',
    bodyStyle: 'background-color:#DFE8F6',
    items:[
    changePasswordDlg,
    lostPasswordDlg,
    personalInfoDlg,
    selectLangDlg,
    visibilityDlg
    ]
};

Each dialog is a panel and has a cancel button. I want the cancel button of each panel to collapse the current panel from the accordion layout. How can this be done?

I have tried searching for it and found that setting expand to false does the trick. But I couldn't find on which component to call the expand function.

Answer 1

Depending on the layout of the panels, the cancel buttons should be able to do something like:

this.ownerCt.expand();

However, that gets complex and fragile if you are changing layouts around. Better to set the panel as a property in the cancel button's config and use it within the button's handler:

var cancelButton = new Ext.Button({other: 1, config: 2, items:3, mySettingsDialog: this}); 
// where this is a reference to the encompassing dialog panel

Then in the handler:

this.mySettingsDialog.expand();

The scope for the handler defaults to the Button unless you've changed it.