Refactor History and Favorites into MenuButton. (403ec7ca) · Commits · extjs / jsduck

template/app/controller/Classes.js

+1 −2

Original line number	Diff line number	Diff line
		@@ -11,8 +11,7 @@ Ext.define('Docs.controller.Classes', {
		views: [
		'cls.List',
		'tree.Tree',
		'tree.Favorites',
		'tree.History',
		'tree.MenuButton',
		'tree.HoverMenu'
		],

template/app/view/tree/History.js

deleted100644 → 0

+0 −67

Original line number	Diff line number	Diff line
		/**
		* History button with fly-out menu of history entries.
		*/
		Ext.define('Docs.view.tree.History', {
		extend: 'Ext.Component',
		alias: 'widget.docshistorybutton',

		id: 'historyBtn',
		html: '<span></span>History',

		afterRender: function() {
		this.callParent(arguments);

		this.getEl().on({
		mouseover: function() {
		if (!this.hoverMenu) {
		this.renderMenu();
		}

		this.hoverMenu.show();
		clearTimeout(this.hideTimeout);
		},
		mouseout: this.deferHideMenu,
		scope: this
		});

		},

		renderMenu: function() {
		this.hoverMenu = Ext.create('Docs.view.tree.HoverMenu', {
		emptyText: 'No history',
		store: Docs.App.getStore('History')
		});

		this.hoverMenu.getEl().setVisibilityMode(Ext.core.Element.DISPLAY);

		this.hoverMenu.getEl().on({
		mouseover: function() {
		clearTimeout(this.hideTimeout);
		},
		mouseout: this.deferHideMenu,
		click: function(e) {
		if (e.getTarget(".close")) {
		var cls = e.getTarget().rel;
		Docs.History.removeClass(e.getTarget().rel);
		} else {
		this.hoverMenu.hide();
		}
		e.preventDefault();
		},
		scope: this
		});

		var p = this.getEl().getXY();
		this.hoverMenu.getEl().setStyle({
		left: "20px",
		width: "220px",
		top: (p[1]+23)+"px"
		});
		},

		deferHideMenu: function() {
		this.hideTimeout = Ext.Function.defer(function() {
		this.hoverMenu.hide();
		}, 200, this);
		}
		});

template/app/view/tree/Favorites.js→template/app/view/tree/MenuButton.js

+38 −15

Original line number	Diff line number	Diff line
		/**
		* Favorites button with fly-out menu of entries.
		* Button with fly-out menu of history/favorites entries.
		*/
		Ext.define('Docs.view.tree.Favorites', {
		Ext.define('Docs.view.tree.MenuButton', {
		extend: 'Ext.Component',
		alias: 'widget.docsfavoritesbutton',
		alias: 'widget.menubutton',

		id: 'favoritesBtn',
		html: '<span></span>Favorites',
		/**
		* @cfg {Ext.data.Store} store
		* The store that contains the menu entries.
		*/
		/**
		* @cfg {String} text
		* Text for the button.
		*/
		text: "",
		/**
		* @cfg {String} emptyText
		* Text to display in menu when store empty.
		*/
		emptyText: "",

		initComponent: function() {
		this.addEvents(
		/**
		* @event closeclick
		* Fired when close link in menu clicked.
		* @param {String} cls Name of the class that was closed.
		*/
		"closeclick"
		);
		this.html = '<span></span>' + this.text;

		this.callParent();
		},

		afterRender: function() {
		this.callParent(arguments);
		@@ -16,20 +42,18 @@ Ext.define('Docs.view.tree.Favorites', {
		if (!this.hoverMenu) {
		this.renderMenu();
		}

		this.hoverMenu.show();
		clearTimeout(this.hideTimeout);
		},
		mouseout: this.deferHideMenu,
		scope: this
		});

		},

		renderMenu: function() {
		this.hoverMenu = Ext.create('Docs.view.tree.HoverMenu', {
		emptyText: 'No favorites',
		store: Docs.App.getStore('Favorites')
		emptyText: this.emptyText,
		store: this.store
		});

		this.hoverMenu.getEl().setVisibilityMode(Ext.core.Element.DISPLAY);
		@@ -41,8 +65,7 @@ Ext.define('Docs.view.tree.Favorites', {
		mouseout: this.deferHideMenu,
		click: function(e) {
		if (e.getTarget(".close")) {
		var cls = e.getTarget().rel;
		Docs.Favorites.remove(e.getTarget().rel);
		this.fireEvent("closeclick", e.getTarget().rel);
		} else {
		this.hoverMenu.hide();
		}

template/app/view/tree/Tree.js

+35 −19

Original line number	Diff line number	Diff line
		@@ -14,25 +14,6 @@ Ext.define('Docs.view.tree.Tree', {
		border: false,
		bodyBorder: false,

		dockedItems: [
		{
		xtype: 'container',
		layout: {
		type: 'hbox'
		},
		dock: 'top',
		margin: '0 0 15 0',
		items: [
		{
		xtype: 'docsfavoritesbutton'
		},
		{
		xtype: 'docshistorybutton'
		}
		]
		}
		],

		initComponent: function() {
		// Expand the main tree
		this.root.expanded = true;
		@@ -45,6 +26,41 @@ Ext.define('Docs.view.tree.Tree', {
		}, this);
		}, this);

		this.dockedItems = [
		{
		xtype: 'container',
		layout: 'hbox',
		dock: 'top',
		margin: '0 0 15 0',
		items: [
		{
		xtype: 'menubutton',
		id: 'favoritesBtn',
		text: 'Favorites',
		emptyText: 'No favorites',
		store: Ext.getStore('Favorites'),
		listeners: {
		closeclick: function(cls) {
		Docs.Favorites.remove(cls);
		}
		}
		},
		{
		xtype: 'menubutton',
		id: 'historyBtn',
		text: 'History',
		emptyText: 'No history',
		store: Ext.getStore('History'),
		listeners: {
		closeclick: function(cls) {
		Docs.History.removeClass(cls);
		}
		}
		}
		]
		}
		];

		this.callParent();
		},