Extjs accordion đóng tất cả bảng điều khiển động

Question

Tôi đang sử dụng Extjs 5.0.0

Tôi có một accordion với một số bảng. Ở đây yêu cầu của tôi là mở rộng và thu gọn bảng điều khiển bằng cách nhấp vào tiêu đề.

Khi lần nhấp đầu tiên mở rộng, điều đó tốt. trong khi một lần nữa nhấp vào cùng một tiêu đề tôi muốn thu gọn tất cả các bảng. Ở đây nó mở bảng điều khiển tiếp theo.

Tôi vừa thử bằng cách mở rộng bảng điều khiển ẩn. Nhưng ở đây cả bảng điều khiển ẩn và bảng điều khiển tiếp theo cho bảng điều khiển được nhấp đều được mở rộng.

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

Có giải pháp nào để giải quyết vấn đề này không?

Cảm ơn

Answer 1

Nếu bạn là ổn với việc mở nhiều mục accordion cùng một lúc, cho phép tài sản mutli và thiết lập tất cả các bảng khác, ngoại trừ bảng điều khiển ẩn sụp đổ theo mặc định sẽ giải quyết vấ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

Sửa: Đối với phiên bản trên 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' 
      }], 
     });  
    } 
});