diff --git a/template/app/view/Viewport.js b/template/app/view/Viewport.js
index b73ba4125c8132b63e66f0eb5b78e3d1b8b0d4e6..4d807559a87e781c7deac60245f440a8f9551e0e 100644
--- a/template/app/view/Viewport.js
+++ b/template/app/view/Viewport.js
@@ -4,22 +4,17 @@
 Ext.define('Docs.view.Viewport', {
     extend: 'Ext.container.Viewport',
     requires: [
+        'Docs.view.search.Container',
+        'Docs.view.Tabs',
+        'Docs.view.index.Welcome',
         'Docs.view.cls.Index',
         'Docs.view.cls.Container',
         'Docs.view.tree.Tree',
-        'Docs.view.index.Welcome',
+        'Docs.view.guides.Index',
+        'Docs.view.videos.Index',
         'Docs.view.videos.Tree',
         'Docs.view.examples.Index',
-        'Docs.view.examples.List',
-        'Docs.view.examples.Tree',
-        'Docs.view.FavoritesPanel',
-        'Docs.view.videos.Index',
-        'Docs.view.guides.Index',
-        'Docs.view.Tabs',
-        'Docs.view.search.Container',
-        'Docs.Favorites',
-        'Docs.Settings',
-        'Docs.History'
+        'Docs.view.examples.Tree'
     ],
 
     id: 'viewport',
diff --git a/template/app/view/examples/Index.js b/template/app/view/examples/Index.js
index c42fa0f38447039184e1a9cbffa1d2fb0879b28e..bd83d7fed1e48275acc2db504d1883d656dcb6a4 100644
--- a/template/app/view/examples/Index.js
+++ b/template/app/view/examples/Index.js
@@ -4,6 +4,9 @@
 Ext.define('Docs.view.examples.Index', {
     extend: 'Ext.container.Container',
     alias: 'widget.examplesindex',
+    requires: [
+        'Docs.view.examples.List'
+    ],
 
     cls: 'all-demos iScroll',
     margin: '10 0 0 0',
diff --git a/template/app/view/examples/List.js b/template/app/view/examples/List.js
index 02b24be9048d4d5c596e4b57a82d67a750a390b5..1f75168114b0cfe324caf32cbf083829f13e3975 100644
--- a/template/app/view/examples/List.js
+++ b/template/app/view/examples/List.js
@@ -8,42 +8,6 @@ Ext.define('Docs.view.examples.List', {
     cls: 'demos',
     itemSelector: 'dl',
 
-    tpl: Ext.create('Ext.XTemplate',
-        '<div id="sample-ct">',
-            '<tpl for=".">',
-            '<div><a name="{id}"></a><h2><div>{title}</div></h2>',
-            '<dl>',
-                '<tpl for="samples">',
-                    '<dd ext:url="{url}"><img src="extjs/examples/shared/screens/{icon}"/>',
-                        '<div><h4>{text}',
-                            '<tpl if="this.isNew(values.status)">',
-                                '<span class="new-sample"> (New)</span>',
-                            '</tpl>',
-                            '<tpl if="this.isUpdated(values.status)">',
-                                '<span class="updated-sample"> (Updated)</span>',
-                            '</tpl>',
-                            '<tpl if="this.isExperimental(values.status)">',
-                                '<span class="new-sample"> (Experimental)</span>',
-                            '</tpl>',
-                        '</h4><p>{desc}</p></div>',
-                    '</dd>',
-                '</tpl>',
-            '<div style="clear:left"></div></dl></div>',
-            '</tpl>',
-        '</div>',
-        {
-            isExperimental: function(status) {
-                return status === 'experimental';
-            },
-            isNew: function(status) {
-                return status === 'new';
-            },
-            isUpdated: function(status) {
-                return status === 'updated';
-            }
-        }
-    ),
-
     initComponent: function() {
         this.addEvents(
             /**
@@ -54,6 +18,42 @@ Ext.define('Docs.view.examples.List', {
             'exampleclick'
         );
 
+        this.tpl = Ext.create('Ext.XTemplate',
+            '<div id="sample-ct">',
+                '<tpl for=".">',
+                '<div><a name="{id}"></a><h2><div>{title}</div></h2>',
+                '<dl>',
+                    '<tpl for="samples">',
+                        '<dd ext:url="{url}"><img src="extjs/examples/shared/screens/{icon}"/>',
+                            '<div><h4>{text}',
+                                '<tpl if="this.isNew(values.status)">',
+                                    '<span class="new-sample"> (New)</span>',
+                                '</tpl>',
+                                '<tpl if="this.isUpdated(values.status)">',
+                                    '<span class="updated-sample"> (Updated)</span>',
+                                '</tpl>',
+                                '<tpl if="this.isExperimental(values.status)">',
+                                    '<span class="new-sample"> (Experimental)</span>',
+                                '</tpl>',
+                            '</h4><p>{desc}</p></div>',
+                        '</dd>',
+                    '</tpl>',
+                '<div style="clear:left"></div></dl></div>',
+                '</tpl>',
+            '</div>',
+            {
+                isExperimental: function(status) {
+                    return status === 'experimental';
+                },
+                isNew: function(status) {
+                    return status === 'new';
+                },
+                isUpdated: function(status) {
+                    return status === 'updated';
+                }
+            }
+        );
+
         this.on({
             'afterrender': function(cmp) {
                 cmp.el.addListener('mouseover', function(evt, el) {
diff --git a/template/app/view/guides/Index.js b/template/app/view/guides/Index.js
index ab276612a54218de42f8d700b06c645ef15095a3..33ed0f55075c523be31e82c0120205dfb7c1d91f 100644
--- a/template/app/view/guides/Index.js
+++ b/template/app/view/guides/Index.js
@@ -4,6 +4,9 @@
 Ext.define('Docs.view.guides.Index', {
     extend: 'Ext.container.Container',
     alias: 'widget.guideindex',
+    requires: [
+        'Docs.view.guides.List'
+    ],
 
     cls: 'all-demos iScroll',
     margin: '10 0 0 0',
diff --git a/template/app/view/guides/List.js b/template/app/view/guides/List.js
index db6d1d92abdc91025364f1a729343420f250ee74..504f3c7130922181f4c65bd29fcc1a6bd28778c6 100644
--- a/template/app/view/guides/List.js
+++ b/template/app/view/guides/List.js
@@ -8,26 +8,6 @@ Ext.define('Docs.view.guides.List', {
     cls: 'demos',
     itemSelector: 'dl',
 
-    tpl: Ext.create('Ext.XTemplate',
-        '<div id="sample-ct">',
-            '<tpl for=".">',
-            '<div><a name="{url}"></a><h2><div>{group}</div></h2>',
-            '<dl>',
-                '<tpl for="guides">',
-                    '<dd ext:url="guide/{name}"><img src="guides/{name}/icon-lg.png"/>',
-                        '<div><h4>{title}</h4><p>{description}</p></div>',
-                    '</dd>',
-                '</tpl>',
-            '<div style="clear:left"></div></dl></div>',
-            '</tpl>',
-        '</div>',
-        {
-            isExperimental: function(status) {
-                return status === 'experimental';
-            }
-        }
-    ),
-
     initComponent: function() {
         this.addEvents(
             /**
@@ -38,6 +18,26 @@ Ext.define('Docs.view.guides.List', {
             'guideclick'
         );
 
+        this.tpl = Ext.create('Ext.XTemplate',
+            '<div id="sample-ct">',
+                '<tpl for=".">',
+                '<div><a name="{url}"></a><h2><div>{group}</div></h2>',
+                '<dl>',
+                    '<tpl for="guides">',
+                        '<dd ext:url="guide/{name}"><img src="guides/{name}/icon-lg.png"/>',
+                            '<div><h4>{title}</h4><p>{description}</p></div>',
+                        '</dd>',
+                    '</tpl>',
+                '<div style="clear:left"></div></dl></div>',
+                '</tpl>',
+            '</div>',
+            {
+                isExperimental: function(status) {
+                    return status === 'experimental';
+                }
+            }
+        );
+
         this.on({
             'afterrender': function(cmp) {
                 cmp.el.addListener('mouseover', function(evt, el) {
diff --git a/template/app/view/videos/Index.js b/template/app/view/videos/Index.js
index 2ee8a7754c8ab97a7791dfc63a51dae600731368..2db5708e5e05f8d248b0942c090d1a6d74a1fa06 100644
--- a/template/app/view/videos/Index.js
+++ b/template/app/view/videos/Index.js
@@ -4,6 +4,9 @@
 Ext.define('Docs.view.videos.Index', {
     extend: 'Ext.container.Container',
     alias: 'widget.videoindex',
+    requires: [
+        'Docs.view.videos.List'
+    ],
 
     cls: 'all-demos iScroll',
     margin: '10 0 0 0',
diff --git a/template/app/view/videos/List.js b/template/app/view/videos/List.js
index 16d147e22e25c33af7dc1bc6530708dce429d18d..f5c7b0d518b6a7af94fe7cc3f52d022592ed29b2 100644
--- a/template/app/view/videos/List.js
+++ b/template/app/view/videos/List.js
@@ -8,27 +8,6 @@ Ext.define('Docs.view.videos.List', {
     cls: 'demos',
     itemSelector: 'dl',
 
-    tpl: Ext.create('Ext.XTemplate',
-        '<div id="sample-ct">',
-            '<tpl for=".">',
-            '<div class="{[xindex == 1 ? "" : " collapsed"]}"><a name="{id}"></a><h2><div>{group}</div></h2>',
-            '<dl>',
-                '<tpl for="videos">',
-                    '<dd ext:id="{id}"><img src="{thumb}"/>',
-                        '<div><h4>{title}',
-                        '</h4><p>{[values.description.substr(0,100)]}</p></div>',
-                    '</dd>',
-                '</tpl>',
-            '<div style="clear:left"></div></dl></div>',
-            '</tpl>',
-        '</div>',
-        {
-            desc: function(status) {
-                return status === 'experimental';
-            }
-        }
-    ),
-
     initComponent: function() {
         this.addEvents(
             /**
@@ -39,6 +18,27 @@ Ext.define('Docs.view.videos.List', {
             'videoclick'
         );
 
+        this.tpl = Ext.create('Ext.XTemplate',
+            '<div id="sample-ct">',
+                '<tpl for=".">',
+                '<div class="{[xindex == 1 ? "" : " collapsed"]}"><a name="{id}"></a><h2><div>{group}</div></h2>',
+                '<dl>',
+                    '<tpl for="videos">',
+                        '<dd ext:id="{id}"><img src="{thumb}"/>',
+                            '<div><h4>{title}',
+                            '</h4><p>{[values.description.substr(0,100)]}</p></div>',
+                        '</dd>',
+                    '</tpl>',
+                '<div style="clear:left"></div></dl></div>',
+                '</tpl>',
+            '</div>',
+            {
+                desc: function(status) {
+                    return status === 'experimental';
+                }
+            }
+        );
+
         this.on({
             'afterrender': function(cmp) {
                 cmp.el.addListener('mouseover', function(evt, el) {