X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..6746dc89c47ed01b165cc1152533605f97eb8e8d:/docs/app/view/HoverMenuButton.js
diff --git a/docs/app/view/HoverMenuButton.js b/docs/app/view/HoverMenuButton.js
new file mode 100644
index 00000000..61bfb430
--- /dev/null
+++ b/docs/app/view/HoverMenuButton.js
@@ -0,0 +1,147 @@
+/**
+ * Toolbar button with menu that appears when hovered over.
+ */
+Ext.define('Docs.view.HoverMenuButton', {
+ extend: 'Ext.toolbar.TextItem',
+ alias: 'widget.hovermenubutton',
+ componentCls: "hover-menu-button",
+ requires: [
+ 'Docs.view.HoverMenu'
+ ],
+
+ /**
+ * @cfg {Ext.data.Store} store
+ * Store with menu items (required).
+ */
+
+ /**
+ * @cfg {Object} menuCfg
+ * Additional config options for {@link Docs.view.HoverMenu}
+ */
+ menuCfg: {},
+
+ /**
+ * @cfg {Boolean} showCount
+ * True to show small number in button indicating the number of items in menu.
+ * Defaults to false.
+ */
+ showCount: false,
+
+ statics: {
+ // Global list of all menus.
+ // So we can hide all other menus while showing a specific one.
+ menus: []
+ },
+
+ initComponent: function() {
+ this.addEvents(
+ /**
+ * @event click
+ * Fired when button clicked.
+ */
+ "click",
+ /**
+ * @event closeclick
+ * Fired when close link in menu clicked.
+ * @param {String} name Name of the class and or member that was closed.
+ * For example "Ext.Ajax" or "Ext.Ajax-method-request".
+ */
+ "closeclick"
+ );
+
+ // Append links count to button text, update it when store filtered
+ if (this.showCount) {
+ this.initialText = this.text;
+ this.text += ' ' + this.store.getCount() + '';
+ this.store.on("datachanged", function() {
+ this.setText(this.initialText + ' ' + this.store.getCount() + '');
+ }, this);
+ }
+
+ this.menu = Ext.create('Docs.view.HoverMenu', Ext.apply({
+ store: this.store
+ }, this.menuCfg));
+
+ this.callParent(arguments);
+ },
+
+ onRender: function() {
+ this.callParent(arguments);
+
+ this.renderMenu();
+
+ this.getEl().on({
+ click: function() {
+ this.fireEvent("click");
+ },
+ mouseover: function() {
+ // hide other menus
+ Ext.Array.forEach(Docs.view.HoverMenuButton.menus, function(menu) {
+ if (menu !== this.menu) {
+ menu.hide();
+ }
+ });
+ // stop pending menuhide process
+ clearTimeout(this.hideTimeout);
+ this.menu.show();
+ // position menu right below button and show it
+ var p = this.getEl().getXY();
+ this.menu.getEl().setStyle({
+ left: (p[0]-10)+"px",
+ top: (p[1]+23)+"px"
+ });
+ },
+ mouseout: this.deferHideMenu,
+ scope: this
+ });
+
+ this.menu.getEl().on({
+ mouseover: function() {
+ clearTimeout(this.hideTimeout);
+ },
+ mouseout: this.deferHideMenu,
+ scope: this
+ });
+
+ },
+
+ onDestroy: function() {
+ // clean up DOM
+ this.menu.destroy();
+ // remove from global menu list
+ Ext.Array.remove(Docs.view.HoverMenuButton.menus, this.menu);
+
+ this.callParent(arguments);
+ },
+
+ renderMenu: function() {
+ this.menu.getEl().setVisibilityMode(Ext.core.Element.DISPLAY);
+ this.menu.hide();
+
+ this.menu.getEl().addListener('click', function(e) {
+ if (e.getTarget(".close")) {
+ this.fireEvent("closeclick", e.getTarget().rel);
+ } else {
+ this.menu.hide();
+ }
+ e.preventDefault();
+ }, this);
+
+ Docs.view.HoverMenuButton.menus.push(this.menu);
+ },
+
+ deferHideMenu: function() {
+ this.hideTimeout = Ext.Function.defer(function() {
+ this.menu.hide();
+ }, 200, this);
+ },
+
+ /**
+ * Returns the store used by menu.
+ * @return {Ext.data.Store}
+ */
+ getStore: function() {
+ return this.store;
+ }
+
+});