Extjs akordeon tüm paneli dinamik olarak kapatın

Question

Kullanıyorum Extjs 5.0.0

Bazı paneller ile akordeonum var. Burada gereksinim, başlığı tıklayarak panelin genişletilmesi ve daraltılmasıdır.

İlk tıklamayla genişletildi, bu iyi. Yine aynı başlık üzerine tıklayarak tüm panelleri daraltmak istiyorum. İşte bir sonraki panelin açılışı.

Sadece gizli bir paneli genişleterek denedim. Ancak burada hem gizli panel hem de tıklanan panelin bir sonraki paneli genişliyor.

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

Bu sorunu çözmek için herhangi bir çözüm var mı?

Teşekkür

Answer 1

bir defada birden fazla akordeon öğeleri açma ile tamam ise, mutli özelliğini etkinleştirmek ve sorunu çözer varsayılan olarak daraltılmış gizli panelin dışındaki tüm diğer panelleri ayarlayın.

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

Düzenleme

: Diğerleri daha iyi sorunu anlamak böylece Ext 5. Yukarıdaki sürümleri için

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' 
      }], 
     });  
    } 
});