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

diff --git a/docs/js/OverviewPanel.js b/docs/app/view/cls/Overview.js
similarity index 71%
rename from docs/js/OverviewPanel.js
rename to docs/app/view/cls/Overview.js
index 4b5ea9b0..d9a80497 100644
--- a/docs/js/OverviewPanel.js
+++ b/docs/app/view/cls/Overview.js
@@ -1,37 +1,19 @@
 /**
  * Renders the whole class-documentation page.
  */
-Ext.define('Docs.OverviewPanel', {
+Ext.define('Docs.view.cls.Overview', {
     extend: 'Ext.panel.Panel',
-
-    id: 'doc-overview',
-    cls: 'doc-tab iScroll',
+    alias: 'widget.classoverview',
+    requires: [
+        'Docs.view.cls.Toolbar',
+        'Docs.Syntax',
+        'Docs.Settings'
+    ],
+
+    cls: 'class-overview iScroll',
     title: 'Overview',
     autoScroll: true,
-
-    listeners: {
-        afterrender: function(cmp) {
-            // Expand member when clicked
-            cmp.el.addListener('click', function(cmp, el) {
-                Ext.get(Ext.get(el).up('.member')).toggleCls('open');
-            }, this, {
-                preventDefault: true,
-                delegate: '.expandable'
-            });
-            // Do nothing when clicking on not-expandable items
-            cmp.el.addListener('click', Ext.emptyFn, this, {
-                preventDefault: true,
-                delegate: '.not-expandable'
-            });
-
-            cmp.el.addListener('click', function(cmp, el) {
-                Docs.ClassLoader.load(el.rel);
-            }, this, {
-                preventDefault: true,
-                delegate: '.docClass'
-            });
-        }
-    },
+    bodyPadding: '20',
 
     /**
      * Scrolls the specified element into view
@@ -42,14 +24,15 @@ Ext.define('Docs.OverviewPanel', {
         var el = Ext.get(Ext.query(query)[0]);
         if (el) {
             var isMember = el.hasCls("member");
-            var scrollOffset = el.getY() - (isMember ? 170 : 160);
-            var docContent = Ext.get(Ext.query('#doc-overview .x-panel-body')[0]);
+            var scrollOffset = el.getY() - (isMember ? 145 : 135);
+            var docContent = this.getEl().down('.x-panel-body');
             var currentScroll = docContent.getScroll()['top'];
             docContent.scrollTo('top', currentScroll + scrollOffset, true);
 
             if (isMember && el.down(".expandable")) {
                 el.addCls('open');
             }
+            el.highlight();
         }
     },
 
@@ -60,28 +43,26 @@ Ext.define('Docs.OverviewPanel', {
      */
     load: function(docClass) {
         this.docClass = docClass;
-        this.removeDocked(this.toolbar, true);
-        this.toolbar = Ext.create('Docs.OverviewToolbar', {
-            docClass: docClass
+
+        if (this.toolbar) {
+            this.removeDocked(this.toolbar, true);
+        }
+        this.toolbar = Ext.create('Docs.view.cls.Toolbar', {
+            docClass: this.docClass
         });
         this.addDocked(this.toolbar);
 
         this.update(this.renderClass(docClass));
-        this.syntaxHighlight();
-    },
+        Docs.Syntax.highlight(this.getEl());
 
-    // Marks all code blocks with "prettyprint" class and then calls
-    // the prettify library function to highlight them.
-    syntaxHighlight: function() {
-        Ext.Array.forEach(Ext.query("pre > code"), function(el) {
-            Ext.get(el).addCls("prettyprint");
-        });
-        prettyPrint();
+        if (Docs.Settings.get("hideInherited")) {
+            this.toolbar.hideInherited(true);
+        }
     },
 
     renderClass: function(cls) {
         this.classTpl = this.classTpl || new Ext.XTemplate(
-            '<div class="doc-overview-content">',
+            '<div>',
                 '{hierarchy}',
                 '{doc}',
                 '<div class="members">',
@@ -98,12 +79,18 @@ Ext.define('Docs.OverviewPanel', {
     },
 
     renderHierarchy: function(cls) {
-        if (cls.superclasses.length === 0 && cls.allMixins.length === 0) {
+        if (cls.superclasses.length === 0 && cls.allMixins.length === 0 && cls.alternateClassNames.length === 0) {
             return "";
         }
 
         this.hierarchyTpl = this.hierarchyTpl || new Ext.XTemplate(
             '<pre class="hierarchy">',
+            '<tpl if="alternateClassNames.length &gt; 0">',
+                '<h4>Alternate names</h4>',
+                '<tpl for="alternateClassNames">',
+                    '<div class="alternate-class-name">{.}</div>',
+                '</tpl>',
+            '</tpl>',
             '<tpl if="tree">',
                 '<h4>Hierarchy</h4>',
                 '{tree}',
@@ -119,7 +106,8 @@ Ext.define('Docs.OverviewPanel', {
 
         return this.hierarchyTpl.apply({
             tree: cls.superclasses.length ? this.renderClassTree(cls.superclasses.concat(cls.name), true) : "",
-            mixins: Ext.Array.map(cls.allMixins, this.renderLink, this)
+            mixins: Ext.Array.map(cls.allMixins, this.renderLink, this),
+            alternateClassNames: cls.alternateClassNames
         });
     },
 
@@ -158,8 +146,8 @@ Ext.define('Docs.OverviewPanel', {
         // Skip rendering empty sections
         var html = [];
         for (var type in typeTitles) {
-            if (cls[type].length > 0) {
-                html.push(this.renderSection(cls[type], type, typeTitles[type]));
+            if (cls.members[type].length > 0) {
+                html.push(this.renderSection(cls.members[type], type, typeTitles[type]));
             }
         }
         return html.join("");
@@ -191,10 +179,10 @@ Ext.define('Docs.OverviewPanel', {
                 // member name and type + link to owner class and source
                 '<div class="title">',
                     '<div class="meta">',
-                        '<a href="#/api/{member}" rel="{member}" class="definedIn docClass">{member}</a><br/>',
+                        '<a href="#/api/{owner}" rel="{owner}" class="definedIn docClass">{owner}</a><br/>',
                         '<a href="source/{href}" target="_blank" class="viewSource">view source</a>',
                     '</div>',
-                    '<a href="#" class="name {expandable}">{name}</a>{signature}',
+                    '{signature}',
                 '</div>',
                 // short and long descriptions
                 '<div class="description">',
@@ -216,7 +204,7 @@ Ext.define('Docs.OverviewPanel', {
             // use classname "expandable" when member has shortened description
             expandable: member.shortDoc ? "expandable" : "not-expandable",
             // use classname "inherited" when member is not defined in this class
-            inherited: member.member === this.docClass.name ? "not-inherited" : "inherited",
+            inherited: member.owner === this.docClass.name ? "not-inherited" : "inherited",
             // method params signature or property type signature
             signature: this.renderSignature(member),
             // full documentation together with optional parameters and return value
@@ -225,19 +213,39 @@ Ext.define('Docs.OverviewPanel', {
     },
 
     renderSignature: function(member) {
+        this.signatureTpl = this.signatureTpl || new Ext.XTemplate(
+            '{before}<a href="#/api/{member}-{tagname}-{name}" class="name {expandable}">{name}</a>{params}{after}'
+        );
+
+        var cfg = Ext.apply({}, member);
+        cfg.expandable = member.shortDoc ? "expandable" : "not-expandable";
+
+        if (member.tagname === "method" && member.name === member.owner.replace(/^.*\./, "")) {
+            cfg.before = "<strong class='constructor-signature'>new</strong>";
+        }
+
         if (member.tagname === "cfg" || member.tagname === "property") {
-            return "<span> : " + member.type + "</span>";
+            cfg.params = "<span> : " + member.type + "</span>";
         }
         else {
             var ps = Ext.Array.map(member.params, this.renderShortParam, this).join(", ");
-            var signature = '( <span class="pre">' + ps + "</span> )";
+            cfg.params = '( <span class="pre">' + ps + "</span> )";
             if (member.tagname === "method") {
-                return signature + " : " + member["return"].type;
-            }
-            else {
-                return signature;
+                cfg.params += " : " + member["return"].type;
             }
         }
+
+        if (member.protected) {
+            cfg.after = "<strong class='protected-signature'>protected</strong>";
+        }
+        if (member.static) {
+            cfg.after = "<strong class='static-signature'>static</strong>";
+        }
+        if (member.deprecated) {
+            cfg.after = "<strong class='deprecated-signature'>deprecated</strong>";
+        }
+
+        return this.signatureTpl.apply(cfg);
     },
 
     renderShortParam: function(param) {
@@ -248,6 +256,14 @@ Ext.define('Docs.OverviewPanel', {
     renderLongDoc: function(member) {
         var doc = member.doc;
 
+        if (member.deprecated) {
+            var v = member.deprecated.version ? "since " + member.deprecated.version : "";
+            doc += '<div class="deprecated">';
+            doc += Ext.String.format('<p>This {0} has been <strong>deprecated</strong> {1}</p>', member.tagname, v);
+            doc += member.deprecated.text;
+            doc += '</div>';
+        }
+
         if (member.params && member.params.length > 0) {
             doc += '<h3 class="pa">Parameters</h3>';
             var ps = Ext.Array.map(member.params, this.renderLongParam, this).join("");