Upgrade to ExtJS 4.0.2 - Released 06/09/2011

[extjs.git] / docs / app / view / cls / Toolbar.js

diff --git a/docs/js/OverviewToolbar.js b/docs/app/view/cls/Toolbar.js
similarity index 51%
rename from docs/js/OverviewToolbar.js
rename to docs/app/view/cls/Toolbar.js
index 5c49cf9..af2c658 100644 (file)
--- a/docs/js/OverviewToolbar.js
+++ b/docs/app/view/cls/Toolbar.js
@@ -1,8 +1,13 @@
 /**
  * Toolbar with menus providing quick access to class members.
  */
-Ext.define('Docs.OverviewToolbar', {
+Ext.define('Docs.view.cls.Toolbar', {
     extend: 'Ext.toolbar.Toolbar',
+    requires: [
+        'Docs.view.HoverMenuButton',
+        'Docs.Settings'
+    ],
+
     dock: 'top',
     cls: 'member-links',
     padding: '3 5',
@@ -15,6 +20,7 @@ Ext.define('Docs.OverviewToolbar', {
 
     initComponent: function() {
         this.items = [];
+        this.memberButtons = {};
 
         var memberTitles = {
             cfg: "Configs",
@@ -23,21 +29,23 @@ Ext.define('Docs.OverviewToolbar', {
             event: "Events"
         };
         for (var type in memberTitles) {
-            var members = this.docClass[type];
+            var members = this.docClass.members[type];
             if (members.length) {
-                this.items.push(this.createMemberButton({
-                    items: members,
+                var btn = this.createMemberButton({
+                    text: memberTitles[type],
                     type: type,
-                    title: memberTitles[type]
-                }));
+                    members: members
+                });
+                this.memberButtons[type] = btn;
+                this.items.push(btn);
             }
         }
 
         if (this.docClass.subclasses.length) {
-            this.items.push(this.createSubClassesButton({
-                items: this.docClass.subclasses,
-                title: "Sub Classes"
-            }));
+            this.items.push(this.createClassListButton("Sub Classes", this.docClass.subclasses));
+        }
+        if (this.docClass.mixedInto.length) {
+            this.items.push(this.createClassListButton("Mixed Into", this.docClass.mixedInto));
         }
 
         this.items = this.items.concat([
@@ -48,7 +56,11 @@ Ext.define('Docs.OverviewToolbar', {
                 xtype: 'checkbox',
                 margin: '0 5 0 0',
                 padding: '0 0 5 0',
-                handler: this.hideInherited
+                checked: Docs.Settings.get("hideInherited"),
+                handler: function(el) {
+                    this.hideInherited(el.checked);
+                },
+                scope: this
             },
             {
                 xtype: 'button',
@@ -76,57 +88,62 @@ Ext.define('Docs.OverviewToolbar', {
     },
 
     createMemberButton: function(cfg) {
-        var menu = Ext.create('Ext.menu.Menu', {
-            items: Ext.Array.map(cfg.items, function(m) {
-                return {
-                    text: m.name,
-                    memberName: cfg.type + '-' + m.name
-                };
-            }),
-            plain: true,
+        var data = Ext.Array.map(cfg.members, function(m) {
+            return this.createLinkRecord(this.docClass.name, m);
+        }, this);
+
+        return Ext.create('Docs.view.HoverMenuButton', {
+            text: cfg.text,
+            cls: 'icon-'+cfg.type,
+            store: this.createStore(data),
+            showCount: true,
             listeners: {
-                click: function(menu, item) {
-                    Ext.getCmp('doc-overview').scrollToEl("#" + item.memberName);
-                }
+                click: function() {
+                    this.up('classoverview').scrollToEl("#m-" + cfg.type);
+                },
+                scope: this
             }
         });
+    },
 
-        return Ext.create('Ext.button.Split', {
-            cls: cfg.type,
-            iconCls: 'icon-' + cfg.type,
-            text: cfg.title + ' <span class="num">' + cfg.items.length + '</span>',
-            listeners: {
-                click: function() {
-                    Ext.getCmp('doc-overview').scrollToEl("#m-" + cfg.type);
-                }
-            },
-            menu: menu
+    createClassListButton: function(text, classes) {
+        var data = Ext.Array.map(classes, function(cls) {
+            return this.createLinkRecord(cls);
+        }, this);
+
+        return Ext.create('Docs.view.HoverMenuButton', {
+            text: text,
+            cls: 'icon-subclass',
+            showCount: true,
+            store: this.createStore(data)
         });
     },
 
-    createSubClassesButton: function(cfg) {
-        var menu = Ext.create('Ext.menu.Menu', {
-            items: Ext.Array.map(cfg.items, function(className) {
-                return {text: className, clsName: className};
-            }),
-            plain: true,
-            listeners: {
-                click: function(menu, item) {
-                    Docs.ClassLoader.load(item.clsName);
-                }
-            }
+    // creates store tha holds link records
+    createStore: function(records) {
+        var store = Ext.create('Ext.data.Store', {
+            fields: ['id', 'cls', 'url', 'label', 'inherited']
         });
+        store.add(records);
+        return store;
+    },
 
-        return Ext.create('Ext.button.Button', {
-            cls: 'subcls',
-            iconCls: 'icon-subclass',
-            text: cfg.title + ' <span class="num">' + cfg.items.length + '</span>',
-            menu: menu
-        });
+    // Creates link object referencing a class (and optionally a class member)
+    createLinkRecord: function(cls, member) {
+        return {
+            cls: cls,
+            url: member ? cls+"-"+member.tagname+"-"+member.name : cls,
+            label: member ? member.name : cls,
+            inherited: member ? member.owner !== cls : false
+        };
     },
 
-    hideInherited: function(el) {
-        var hide = el.checked;
+    /**
+     * Hides or unhides inherited members.
+     * @param {Boolean} hide
+     */
+    hideInherited: function(hide) {
+        Docs.Settings.set("hideInherited", hide);
 
         // show/hide all inherited members
         Ext.Array.forEach(Ext.query('.member.inherited'), function(m) {
@@ -138,8 +155,8 @@ Ext.define('Docs.OverviewToolbar', {
             Ext.get(m).removeCls('first-child');
         });
 
-        Ext.Array.forEach(['cfg', 'property', 'method', 'event'], function(m) {
-            var sectionId = '#m-' + m;
+        Ext.Array.forEach(['cfg', 'property', 'method', 'event'], function(type) {
+            var sectionId = '#m-' + type;
 
             // Hide the section completely if all items in it are inherited
             if (Ext.query(sectionId+' .member.not-inherited').length === 0) {
@@ -152,6 +169,16 @@ Ext.define('Docs.OverviewToolbar', {
             if (sectionMembers.length > 0) {
                 Ext.get(sectionMembers[0]).addCls('first-child');
             }
-        });
+
+            if (this.memberButtons[type]) {
+                var store = this.memberButtons[type].getStore();
+                if (hide) {
+                    store.filterBy(function(m) { return !m.get("inherited"); });
+                }
+                else {
+                    store.clearFilter();
+                }
+            }
+        }, this);
     }
 });