X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..6746dc89c47ed01b165cc1152533605f97eb8e8d:/docs/app/view/HoverMenu.js

diff --git a/docs/app/view/HoverMenu.js b/docs/app/view/HoverMenu.js
new file mode 100644
index 00000000..5ce0a866
--- /dev/null
+++ b/docs/app/view/HoverMenu.js
@@ -0,0 +1,57 @@
+/**
+ * Menu shown by {@link Docs.view.HoverMenuButton}.
+ */
+Ext.define('Docs.view.HoverMenu', {
+    extend: 'Ext.view.View',
+
+    componentCls: 'hover-menu',
+    itemSelector: 'div.item',
+    deferEmptyText: false,
+    renderTo: Ext.getBody(),
+
+    /**
+     * @cfg {Number} colHeight  maximum number of items in one column.
+     * When more than that, items are placed into multiple columns.
+     * Defaults to 25 (current maximum length of history).
+     */
+    columnHeight: 25,
+    /**
+     * @cfg {Boolean} showCloseButtons  true to show "x" after each menu item.
+     * Defaults to false.
+     */
+    showCloseButtons: false,
+
+    initComponent: function() {
+        this.tpl = new Ext.XTemplate(
+            '<table>',
+            '<tr>',
+                '<td>',
+                '<tpl for=".">',
+                    '<div class="item">',
+                        '{[this.renderLink(values)]}',
+                        '<tpl if="this.showCloseButtons">',
+                            '<a class="close" href="#" rel="{cls}">x</a>',
+                        '</tpl>',
+                    '</div>',
+                    // Start new column when columnHeight reached
+                    '<tpl if="xindex % this.columnHeight === 0 && xcount &gt; xindex">',
+                        '</td><td>',
+                    '</tpl>',
+                '</tpl>',
+                '</td>',
+            '</tr>',
+            '</table>',
+            {
+                columnHeight: this.columnHeight,
+                showCloseButtons: this.showCloseButtons,
+                renderLink: function(values) {
+                    var url = values.url || values.cls;
+                    var label = values.label || values.cls;
+                    return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{1}</a>', url, label);
+                }
+            }
+        );
+
+        this.callParent();
+    }
+});