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

diff --git a/docs/app/view/Viewport.js b/docs/app/view/Viewport.js
new file mode 100644
index 00000000..f939fbf8
--- /dev/null
+++ b/docs/app/view/Viewport.js
@@ -0,0 +1,120 @@
+/**
+ * The main viewport, split in to a west and center region.
+ * The North region should also be shown by default in the packaged
+ * (non-live) version of the docs. TODO: close button on north region.
+ */
+Ext.define('Docs.view.Viewport', {
+    extend: 'Ext.container.Viewport',
+    requires: [
+        'Docs.view.cls.Container',
+        'Docs.view.index.Container',
+        'Docs.view.tree.Tree',
+        'Docs.History'
+    ],
+
+    id: 'viewport',
+    layout: 'border',
+    defaults: { xtype: 'container' },
+
+    initComponent: function() {
+        this.items = [
+
+            // This is the 'live docs' header that should appear in the distributed version of the docs
+            // {
+            //     region: 'north',
+            //     layout: 'fit',
+            //     cls: 'notice',
+            //     html: 'For up to date documentation and features, visit <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a>',
+            //     height: 33
+            // },
+
+            {
+                region:'west',
+                width: 240,
+                id: 'west-region-container',
+                padding: '5 0 20 20',
+                layout: 'vbox',
+                defaults: {
+                    xtype: 'container',
+                    width: "100%"
+                },
+                items: [
+                    {
+                        xtype: 'button',
+                        cls: 'logo',
+                        height: 60,
+                        margin: '0 0 10 0',
+                        width: 220,
+                        border: 0,
+                        ui: 'hmm',
+                        listeners: {
+                            click: function() {
+                                Ext.getCmp('container').layout.setActiveItem(0);
+                                Docs.History.push("");
+                            }
+                        }
+                    },
+                    {
+                        cls: 'search',
+                        id: 'search-container',
+                        height: 40,
+                        items: [
+                            {
+                                xtype: 'triggerfield',
+                                triggerCls: 'reset',
+                                emptyText: 'Search',
+                                id: 'search-field',
+                                enableKeyEvents: true,
+                                hideTrigger: true,
+                                onTriggerClick: function() {
+                                    this.reset();
+                                    this.focus();
+                                    this.setHideTrigger(true);
+                                    Ext.getCmp('search-dropdown').hide();
+                                }
+                            },
+                            {
+                                xtype: 'searchdropdown'
+                            }
+                        ]
+                    },
+                    {
+                        flex: 1,
+                        xtype: 'classtree',
+                        root: Docs.classData
+                    }
+                ]
+            },
+            {
+                region: 'center',
+                id: 'center-container',
+                layout: 'fit',
+                minWidth: 800,
+                items: {
+                    id: 'container',
+                    xtype: 'container',
+                    layout: 'card',
+                    padding: '20',
+                    cls: 'container',
+                    items: [
+                        {
+                            autoScroll: true,
+                            xtype: 'indexcontainer',
+                            classData: Docs.overviewData
+                        },
+                        {
+                            xtype: 'classcontainer'
+                        },
+                        {
+                            autoScroll: true,
+                            xtype: 'container',
+                            id: 'guide'
+                        }
+                    ]
+                }
+            }
+        ];
+
+        this.callParent(arguments);
+    }
+});