Extract tabOverflowMenu to a component. (6dc9d341) · Commits · extjs / jsduck

template/app/view/TabMenu.js

0 → 100644

+61 −0

Original line number	Diff line number	Diff line
		/**
		* Menu shown from tab overflow button.
		*/
		Ext.define('Docs.view.TabMenu', {
		extend: 'Ext.menu.Menu',
		plain: true,
		id: 'tabOverflowMenu',

		initComponent: function() {
		this.addEvents(
		/**
		* @event
		* Fired when "close all tabs" item is clicked.
		*/
		"closeAllTabs"
		);

		this.items = [{
		text: 'Close all tabs',
		iconCls: 'close',
		cls: 'close-all',
		handler: function() {
		this.fireEvent("closeAllTabs");
		},
		scope: this
		}];

		this.callParent();
		},

		/**
		* Adds new menu item to represent a tab.
		*
		* @param {Object} tab Tab config object with `text`, `iconCls` and 'href` field.
		* @param {String} cls additional CSS class name
		*/
		addTab: function(tab, cls) {
		// Insert before 'close all tabs' item
		this.insert(this.items.length - 1, {
		text: tab.text,
		iconCls: tab.iconCls,
		origIcon: tab.iconCls,
		href: tab.href,
		cls: cls
		});
		},

		/**
		* Adds CSS class to menu item representing a tab.
		*
		* @param {Object} tab Index of menu item
		* @param {String} cls CSS class name
		*/
		addTabCls: function(tab, cls) {
		this.items.each(function(item) {
		if (item.href === tab.href) {
		item.addCls(cls);
		}
		});
		}
		});

template/app/view/Tabs.js

+11 −28

Original line number	Diff line number	Diff line
		@@ -6,8 +6,10 @@ Ext.define('Docs.view.Tabs', {
		extend: 'Ext.container.Container',
		alias: 'widget.doctabs',
		id: 'doctabs',

		componentCls: 'doctabs',
		requires: [
		'Docs.view.TabMenu'
		],

		minTabWidth: 80,
		maxTabWidth: 160,
		@@ -319,27 +321,15 @@ Ext.define('Docs.view.Tabs', {
		* Adds a tab to the overflow list
		*/
		addTabToOverflow: function(tab, opts) {
		var inTabBar = this.inTabBar(tab.href);
		var idx = Ext.Array.indexOf(this.tabs, tab.href);

		if (this.tabs.length > this.tabsInBar.length && idx === this.maxTabsInBar()) {
		// Add 'overflow' class to last visible tab in overflow dropdown
		var prevMenuItem = Ext.ComponentQuery.query('#tabOverflowMenu menuitem[href=' + this.tabs[idx-1] + ']');
		Ext.Array.each(prevMenuItem, function(item) {
		item.addCls('overflow');
		});
		this.tabOverflowMenu.addTabCls(tab, 'overflow');
		}

		// Insert before 'close all tabs' button
		var insertIdx = Ext.getCmp('tabOverflowMenu').items.length - 1;

		Ext.getCmp('tabOverflowMenu').insert(insertIdx, {
		text: tab.text,
		iconCls: tab.iconCls,
		origIcon: tab.iconCls,
		href: tab.href,
		cls: (inTabBar ? '' : ' overflow')
		});
		var inTabBar = this.inTabBar(tab.href);
		this.tabOverflowMenu.addTab(tab, inTabBar ? '' : 'overflow');
		},

		/**
		@@ -439,19 +429,12 @@ Ext.define('Docs.view.Tabs', {
		this.overflowButton = Ext.create('Ext.button.Button', {
		baseCls: "",
		renderTo: this.getEl().down('.tab-overflow'),
		menu: {
		id: 'tabOverflowMenu',
		plain: true,
		items: [{
		text: 'Close all tabs',
		iconCls: 'close',
		cls: 'overflow close-all',
		handler: function() {
		this.closeAllTabs();
		},
		menu: this.tabOverflowMenu = new Docs.view.TabMenu({
		listeners: {
		closeAllTabs: this.closeAllTabs,
		scope: this
		}]
		}
		})
		});

		Ext.Array.each(this.tabs, function(tab) {

template/resources/sass/_tabs.scss

+3 −2

Original line number	Diff line number	Diff line
		@@ -135,7 +135,10 @@
		#tabOverflowMenu {
		.x-menu-item-link {
		padding-top: 5px; }
		.overflow {
		background: #e3e3e3; }
		.close-all {
		background: #e3e3e3;
		border-top: 1px dotted #aaa;
		font-weight: bold;
		a .x-menu-item-text {
		@@ -143,5 +146,3 @@
		.x-menu-item-icon.close {
		background: url(../images/x12.png) no-repeat 4px 4px; } }

		.overflow {
		background: #e3e3e3; }