IE can't deal with Docs.view.class so renamed to Docs.view.cls. Also …

…started a production build rake task

Rakefile

@@ -36,14 +36,14 @@ def load_sdk_vars
   end
 end
 
-def run_jsduck(paths)
+def run_jsduck(paths, template_links = true)
   system [
     "ruby bin/jsduck",
     # --external=Error to ignore the Error class that Ext.Error extends.
     "--external=Error",
     # to create symbolic links to template files instead of copying them over.
     # Useful for development.  Turn off for deployment.
-    "--template-links",
+    (template_links ? "--template-links" : ""),
     '--link=\'<a href="#/api/%c%-%m" rel="%c%-%m" class="docClass">%a</a>\'',
     # Note that we wrap image template inside <p> because {@img} often
     # appears inline withing text, but that just looks ugly in HTML
@@ -67,6 +67,20 @@ task :sdk do
   ])
 end
 
+desc "Run JSDuck on ExtJS SDK for export"
+task :export do
+  load_sdk_vars
+  run_jsduck([
+    "#{SDK_DIR}/extjs/src",
+    "#{SDK_DIR}/platform/src",
+    "#{SDK_DIR}/platform/core/src",
+  ], false)
+
+  system "mkdir -p #{OUT_DIR}/extjs/resources/themes"
+  system "cp #{SDK_DIR}/extjs-all.js #{OUT_DIR}/extjs"
+  system "cp -r #{SDK_DIR}/resources/themes/images #{OUT_DIR}/extjs/resources/themes"
+end
+
 desc "Run JSDuck on the Docs app itself"
 task :docs do
   load_sdk_vars

template/app/History.js

@@ -16,9 +16,14 @@ Ext.define("Docs.History", {
 
     // Parses current URL and navigates to the page
     navigate: function(token) {
+        if (this.ignoreChange) {
+            this.ignoreChange = false;
+            return;
+        }
+
         var url = this.parseToken(token);
         if (url.type === "api") {
-            Docs.App.getController('Classes').loadClass(url.key);
+            Docs.App.getController('Classes').loadClass(url.key, true);
         }
         else if (url.type === "guide") {
             Docs.App.getController('Classes').showGuide(url.key, true);
@@ -40,6 +45,7 @@ Ext.define("Docs.History", {
      * @param {String} token  the part of URL after #
      */
     push: function(token) {
+        this.ignoreChange = true;
         Ext.util.History.add(token);
     }
 });

template/app/controller/Classes.js

@@ -9,8 +9,8 @@ Ext.define('Docs.controller.Classes', {
     ],
 
     views: [
-        'class.List',
-        'class.Tree'
+        'cls.List',
+        'cls.Tree'
     ],
 
     init: function() {
@@ -90,7 +90,7 @@ Ext.define('Docs.controller.Classes', {
             if (docTabPanel) {
                 docTabPanel.setLoading(true);
             }
-
+            
             Ext.data.JsonP.request({
                 url: this.getBaseUrl() + '/output/' + cls + '.js',
                 callbackName: cls.replace(/\./g, '_'),

template/app/view/Viewport.js

@@ -6,8 +6,8 @@
 Ext.define('Docs.view.Viewport', {
     extend: 'Ext.container.Viewport',
     requires: [
-        'Docs.view.class.Show',
-        'Docs.view.class.List',
+        'Docs.view.cls.Show',
+        'Docs.view.cls.List',
         'Docs.History'
     ],
 
@@ -92,7 +92,7 @@ Ext.define('Docs.view.Viewport', {
                             xtype: 'classlist',
                             classData: Docs.overviewData
                         },
-                        Ext.create('Docs.view.class.Show'),
+                        Ext.create('Docs.view.cls.Show'),
                         {
                             autoScroll: true,
                             xtype: 'container',

template/app/view/class/Header.js → template/app/view/cls/Header.js

@@ -1,7 +1,7 @@
 /**
  * Renders class name and icon in page header.
  */
-Ext.define('Docs.view.class.Header', {
+Ext.define('Docs.view.cls.Header', {
     extend: 'Ext.container.Container',
     padding: '5 0 17 0',
     alias: 'widget.classheader',

template/app/view/class/HoverMenuButton.js → template/app/view/cls/HoverMenuButton.js

@@ -1,7 +1,7 @@
 /**
  * Toolbar button with menu that appears when hovered over.
  */
-Ext.define('Docs.view.class.HoverMenuButton', {
+Ext.define('Docs.view.cls.HoverMenuButton', {
     extend: 'Ext.toolbar.TextItem',
     componentCls: "hover-menu-button",
 
@@ -43,7 +43,7 @@ Ext.define('Docs.view.class.HoverMenuButton', {
             },
             mouseover: function() {
                 // hide other menus
-                Ext.Array.forEach(Docs.view.class.HoverMenuButton.menus, function(menu) {
+                Ext.Array.forEach(Docs.view.cls.HoverMenuButton.menus, function(menu) {
                     if (menu !== this.menu) {
                         menu.setStyle({display: "none"});
                     }
@@ -75,7 +75,7 @@ Ext.define('Docs.view.class.HoverMenuButton', {
         // clean up DOM
         this.menu.remove();
         // remove from global menu list
-        Ext.Array.remove(Docs.view.class.HoverMenuButton.menus, this.menu);
+        Ext.Array.remove(Docs.view.cls.HoverMenuButton.menus, this.menu);
 
         this.callParent(arguments);
     },
@@ -88,7 +88,7 @@ Ext.define('Docs.view.class.HoverMenuButton', {
         this.menu.addListener('click', function() {
             this.menu.setStyle({display: "none"});
         }, this);
-        Docs.view.class.HoverMenuButton.menus.push(this.menu);
+        Docs.view.cls.HoverMenuButton.menus.push(this.menu);
     },
 
     renderMenuHtml: function() {

template/app/view/class/List.js → template/app/view/cls/List.js

@@ -2,7 +2,7 @@
  * List of classes on front page.
  * Together with links to guides and icons legend.
  */
-Ext.define('Docs.view.class.List', {
+Ext.define('Docs.view.cls.List', {
     extend: 'Ext.container.Container',
     alias : 'widget.classlist',
     id: 'classlist',

template/app/view/class/Overview.js → template/app/view/cls/Overview.js

@@ -1,11 +1,11 @@
 /**
  * Renders the whole class-documentation page.
  */
-Ext.define('Docs.view.class.Overview', {
+Ext.define('Docs.view.cls.Overview', {
     extend: 'Ext.panel.Panel',
     alias: 'widget.classoverview',
     requires: [
-        'Docs.view.class.Toolbar',
+        'Docs.view.cls.Toolbar',
         'Docs.Syntax'
     ],
 
@@ -46,7 +46,7 @@ Ext.define('Docs.view.class.Overview', {
         if (this.toolbar) {
             this.removeDocked(this.toolbar, true);
         }
-        this.toolbar = Ext.create('Docs.view.class.Toolbar', {
+        this.toolbar = Ext.create('Docs.view.cls.Toolbar', {
             docClass: this.docClass
         });
         this.addDocked(this.toolbar);

template/app/view/class/Panel.js → template/app/view/cls/Panel.js

@@ -2,10 +2,10 @@
  * The documentation panel.
  * TODO: Source code tab, Examples, Q&A
  */
-Ext.define('Docs.view.class.Panel', {
+Ext.define('Docs.view.cls.Panel', {
     extend: 'Ext.tab.Panel',
     requires: [
-        'Docs.view.class.Overview'
+        'Docs.view.cls.Overview'
     ],
 
     id: 'docTabPanel',
@@ -25,7 +25,7 @@ Ext.define('Docs.view.class.Panel', {
 
     initComponent: function() {
         this.items = [
-            Ext.create('Docs.view.class.Overview', {
+            Ext.create('Docs.view.cls.Overview', {
                 docClass: this.docClass
             })
         ];

template/app/view/class/Show.js → template/app/view/cls/Show.js

@@ -2,12 +2,12 @@
  * The class documentation page. Consists of the header (class name) and class panel.
  * TODO: Add framework version
  */
-Ext.define('Docs.view.class.Show', {
+Ext.define('Docs.view.cls.Show', {
     extend: 'Ext.container.Container',
     alias: 'widget.showclass',
     requires: [
-        'Docs.view.class.Header',
-        'Docs.view.class.Panel'
+        'Docs.view.cls.Header',
+        'Docs.view.cls.Panel'
     ],
 
     layout: {
@@ -17,10 +17,10 @@ Ext.define('Docs.view.class.Show', {
 
     initComponent: function() {
         this.items = [
-            Ext.create('Docs.view.class.Header', {
+            Ext.create('Docs.view.cls.Header', {
                 docClass: this.docClass
             }),
-            Ext.create('Docs.view.class.Panel', {
+            Ext.create('Docs.view.cls.Panel', {
                 docClass: this.docClass,
                 flex: 1
             })

template/app/view/class/Toolbar.js → template/app/view/cls/Toolbar.js

@@ -1,10 +1,10 @@
 /**
  * Toolbar with menus providing quick access to class members.
  */
-Ext.define('Docs.view.class.Toolbar', {
+Ext.define('Docs.view.cls.Toolbar', {
     extend: 'Ext.toolbar.Toolbar',
     requires: [
-        'Docs.view.class.HoverMenuButton'
+        'Docs.view.cls.HoverMenuButton'
     ],
 
     dock: 'top',
@@ -77,7 +77,7 @@ Ext.define('Docs.view.class.Toolbar', {
     },
 
     createMemberButton: function(cfg) {
-        return Ext.create('Docs.view.class.HoverMenuButton', {
+        return Ext.create('Docs.view.cls.HoverMenuButton', {
             text: cfg.text,
             cls: 'icon-'+cfg.type,
             links: Ext.Array.map(cfg.members, function(m) {
@@ -92,7 +92,7 @@ Ext.define('Docs.view.class.Toolbar', {
     },
 
     createSubClassesButton: function(subclasses) {
-        return Ext.create('Docs.view.class.HoverMenuButton', {
+        return Ext.create('Docs.view.cls.HoverMenuButton', {
             text: "Sub Classes",
             cls: 'icon-subclass',
             links: Ext.Array.map(subclasses, function(cls) {

template/app/view/class/Tree.js → template/app/view/cls/Tree.js

@@ -1,7 +1,7 @@
 /**
  * The class tree
  */
-Ext.define('Docs.view.class.Tree', {
+Ext.define('Docs.view.cls.Tree', {
     extend: 'Ext.tree.Panel',
     alias : 'widget.classtree',
 

template/resources/sass/docs-ext.scss

@@ -10,6 +10,7 @@ $font-family: Helvetica Neue, Arial, sans-serif;
 $tab-base-color: #e9e9e9;
 $toolbar-background-color: #e9e9e9;
 $panel-border-color: #bfbfbf;
+$panel-body-font-size: 13px;
 $grid-row-cell-selected-background-color: #D9E8FB;
 
 @import 'ext4/default/all';