accordion hide

HTML

<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all.css">

JavaScript

window.menuBoxPanel = Ext.create('Ext.panel.Panel', {
    width: 300, 
    layout: {
        type:'accordion',
        multi: false
    },
    region: 'west', 
    items: [{
        xtype: 'panel',
        title: 'Panel 1',
        items: [{
        	xtype: 'label',
          html: 'label1'
        },
        {
        	xtype: 'label',
          html: 'label1'
        },
        {
        	xtype: 'label',
          html: 'label1'
        }]
    }, {
        xtype: 'panel',
        title: 'Panel 2',
        items: [{
        	xtype: 'label',
          html: 'label1'
        },
        {
        	xtype: 'label',
          html: 'label1'
        },
        {
        	xtype: 'label',
          html: 'label1'
        }]
    }, {
        xtype: 'panel',
        title: 'Panel 3',
        items: [{
        	xtype: 'label',
          html: 'label1'
        },
        {
        	xtype: 'label',
          html: 'label1'
        },
        {
        	xtype: 'label',
          html: 'label1'
        }]
    }, {
        xtype: 'panel',
        title: 'Panel 4',
        items: [{
        	xtype: 'label',
          html: 'label1'
        },
        {
        	xtype: 'label',
          html: 'label1'
        },
        {
        	xtype: 'label',
          html: 'label1'
        }]
    }]
});
var viewport = Ext.create('Ext.container.Viewport', {
    layout: 'border',
    minHeight: 420,
    items: [menuBoxPanel],
    renderTo: Ext.getBody()
});
setTimeout(function(){
    var item = menuBoxPanel.items.getAt(1).hide();
    /*item.collapsed = true;
    item.isCollapsingOrExpanding = undefined;*/
}, 2000);