JavaScript
Run Code
Open in Fiddle
Ext.create({ xtype: 'container', width: 500, height: 400, renderTo: Ext.getBody(), id: 'container', layout: { type: 'card', activeItem: 'card-1' }, bodyPadding: 15, items: [ { id: 'card-0', html: '<h2>Card 1</h2><p>It will be activated but will remain hidden...</p>' }, { id: 'card-1', html: '<p>Card 2</p><p>Will be destroyed in 3 seconds...</p>' } ] }); var container = Ext.getCmp('container'), cardLayout = container.getLayout(); Ext.defer(function () { Ext.getCmp('card-1').destroy(); // or: //container.remove(Ext.getCmp('card-1')); alert('The active element is: ' + cardLayout.getActiveItem().getId()); // setActiveItem does not change anything... cardLayout.setActiveItem(0); }, 3000);