+ var me = this,
+ dockedItems = me.dockedItems || [],
+ activeTab = me.activeTab || 0;
+
+ me.layout = Ext.create('Ext.layout.container.Card', Ext.apply({
+ owner: me,
+ deferredRender: me.deferredRender,
+ itemCls: me.itemCls
+ }, me.layout));
+
+<span id='Ext-tab-Panel-property-tabBar'> /**
+</span> * @property {Ext.tab.Bar} tabBar Internal reference to the docked TabBar
+ */
+ me.tabBar = Ext.create('Ext.tab.Bar', Ext.apply({}, me.tabBar, {
+ dock: me.tabPosition,
+ plain: me.plain,
+ border: me.border,
+ cardLayout: me.layout,
+ tabPanel: me
+ }));
+
+ if (dockedItems && !Ext.isArray(dockedItems)) {
+ dockedItems = [dockedItems];
+ }
+
+ dockedItems.push(me.tabBar);
+ me.dockedItems = dockedItems;
+
+ me.addEvents(
+<span id='Ext-tab-Panel-event-beforetabchange'> /**
+</span> * @event
+ * Fires before a tab change (activated by {@link #setActiveTab}). Return false in any listener to cancel
+ * the tabchange
+ * @param {Ext.tab.Panel} tabPanel The TabPanel
+ * @param {Ext.Component} newCard The card that is about to be activated
+ * @param {Ext.Component} oldCard The card that is currently active
+ */
+ 'beforetabchange',
+
+<span id='Ext-tab-Panel-event-tabchange'> /**
+</span> * @event
+ * Fires when a new tab has been activated (activated by {@link #setActiveTab}).
+ * @param {Ext.tab.Panel} tabPanel The TabPanel
+ * @param {Ext.Component} newCard The newly activated item
+ * @param {Ext.Component} oldCard The previously active item
+ */
+ 'tabchange'
+ );
+ me.callParent(arguments);
+
+ //set the active tab
+ me.setActiveTab(activeTab);
+ //set the active tab after initial layout
+ me.on('afterlayout', me.afterInitialLayout, me, {single: true});
+ },
+
+<span id='Ext-tab-Panel-method-afterInitialLayout'> /**
+</span> * @private
+ * We have to wait until after the initial layout to visually activate the activeTab (if set).
+ * The active tab has different margins than normal tabs, so if the initial layout happens with
+ * a tab active, its layout will be offset improperly due to the active margin style. Waiting
+ * until after the initial layout avoids this issue.
+ */
+ afterInitialLayout: function() {
+ var me = this,
+ card = me.getComponent(me.activeTab);
+
+ if (card) {
+ me.layout.setActiveItem(card);
+ }
+ },
+
+<span id='Ext-tab-Panel-method-setActiveTab'> /**
+</span> * Makes the given card active. Makes it the visible card in the TabPanel's CardLayout and highlights the Tab.
+ * @param {String/Number/Ext.Component} card The card to make active. Either an ID, index or the component itself.
+ */
+ setActiveTab: function(card) {
+ var me = this,
+ previous;
+
+ card = me.getComponent(card);
+ if (card) {
+ previous = me.getActiveTab();
+
+ if (previous && previous !== card && me.fireEvent('beforetabchange', me, card, previous) === false) {
+ return false;
+ }
+
+ me.tabBar.setActiveTab(card.tab);
+ me.activeTab = card;
+ if (me.rendered) {
+ me.layout.setActiveItem(card);
+ }
+
+ if (previous && previous !== card) {
+ me.fireEvent('tabchange', me, card, previous);
+ }
+ }
+ },