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

한 번에 여러 아코디언 항목을 여는 괜찮아 경우, System의 속성을 활성화하고 문제를 해결할 수 기본적으로 축소 숨겨진 패널을 제외한 모든 다른 패널을 설정합니다.

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

편집

은 : 다른 사람들이 더 문제를 이해할 수 있도록 내선 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' 
      }], 
     });  
    } 
});