ExtJS fisarmonica chiudere tutti i pannelli in modo dinamico

Question

Sto usando ExtJS 5.0.0

Ho una fisarmonica con una serie di pannelli. Qui il mio requisito è quello di espandere e comprimere il pannello facendo clic sul titolo.

Al primo clic espanso, va bene. mentre di nuovo facendo clic sullo stesso titolo voglio comprimere tutti i pannelli. Qui sta aprendo il pannello successivo.

Ho appena provato espandendo un pannello nascosto. Ma qui si espandono sia il pannello nascosto che il pannello successivo sul pannello cliccato.

listeners:{ 
    afterrender: function(panel){ 
     panel.header.el.on('click', function() { 
      if (panel.collapsed) { 
      Ext.getCmp('hiddenpanel').collapse(); 
      } 
      else { 
      Ext.getCmp('hiddenpanel').expand(); 
      } 
     }); 
    } 
} 

Esiste una soluzione per risolvere questo problema?

Grazie

Answer 1

Se si sta bene con l'apertura di più elementi di fisarmonica alla volta, consentiranno di proprietà mutli e impostare tutti gli altri pannelli, tranne il pannello nascosto compresso per impostazione predefinita risolverà il problema.

Ext.create('Ext.panel.Panel', { 
    title: 'Accordion Layout', 
    width: 300, 
    height: 300, 
    layout: { 
     type: 'accordion',  
     animate: true, 
     multi: true, 
    }, 
    items: [{ 
     hidden:true,   
    },{ 
     title: 'Panel 1', 
     html: 'Panel content!', 
     collapsed: true 
    },{ 
     title: 'Panel 2', 
     html: 'Panel content!', 
     collapsed: true 
    },{ 
     title: 'Panel 3', 
     html: 'Panel content!', 
     collapsed: true 
    }], 
    renderTo: Ext.getBody() 
}); 

Jsfiddle

Edit: Per le versioni di cui sopra Ext 5.

Ext.application({   
    launch: function() {  
     Ext.create('Ext.panel.Panel', { 
      renderTo: Ext.getBody(), 
      autoScroll: true, 
      defaults: { 
       border: true, 
       autoHeight: true, 
       minHeight: 304, 
       collapsed: true, 
       titleCollapse: false 
      }, 
      layout: { 
       type: 'accordion', 
       animate: true, 
       multi: true, 
       fill: false 
      }, 
      items: [{ 
       collapsed: false, 
       border: 0, 
       height: 0, 
       minHeight: 0 
      }, { 
       title: 'Panel 1' 
      }, { 
       title: 'Panel 2' 
      }, { 
       title: 'Panel 3' 
      }, { 
       title: 'Panel 4' 
      }, { 
       title: 'Panel 5' 
      }], 
     });  
    } 
});