Extjs аккордеон закрыть все панели динамически

Question

Я использую Extjs 5.0.0

У меня есть аккордеон с несколькими панелями. Здесь мое требование состоит в том, чтобы развернуть и свернуть панель, нажав на заголовок.

При первом нажатии он расширяется, это нормально. снова щелкнув на том же заголовке, я хочу свернуть все панели. Здесь открывается его следующая панель.

Я просто попытался расширить скрытую панель. Но здесь скрытая панель и следующая панель на панели с щелчком расширяются.

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

Есть ли какие-либо решения для решения этой проблемы?

Благодаря

Answer 1

Если все в порядке с открытием нескольких элементов аккордеона в то время, позволяет Mutli свойства и установить все другие панели, кроме скрытой панели по умолчанию свернуто будет решить эту проблему.

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: Для версий выше 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' 
      }], 
     });  
    } 
});