docs/app/view/Viewport.js

   1 /**
   2  * The main viewport, split in to a west and center region.
   3  * The North region should also be shown by default in the packaged
   4  * (non-live) version of the docs. TODO: close button on north region.
   5  */
   6 Ext.define('Docs.view.Viewport', {
   7     extend: 'Ext.container.Viewport',
   8     requires: [
   9         'Docs.view.cls.Container',
  10         'Docs.view.index.Container',
  11         'Docs.view.tree.Tree',
  12         'Docs.History'
  13     ],
  14
  15     id: 'viewport',
  16     layout: 'border',
  17     defaults: { xtype: 'container' },
  18
  19     initComponent: function() {
  20         this.items = [
  21
  22             // This is the 'live docs' header that should appear in the distributed version of the docs
  23             // {
  24             //     region: 'north',
  25             //     layout: 'fit',
  26             //     cls: 'notice',
  27             //     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>',
  28             //     height: 33
  29             // },
  30
  31             {
  32                 region:'west',
  33                 width: 240,
  34                 id: 'west-region-container',
  35                 padding: '5 0 20 20',
  36                 layout: 'vbox',
  37                 defaults: {
  38                     xtype: 'container',
  39                     width: "100%"
  40                 },
  41                 items: [
  42                     {
  43                         xtype: 'button',
  44                         cls: 'logo',
  45                         height: 60,
  46                         margin: '0 0 10 0',
  47                         width: 220,
  48                         border: 0,
  49                         ui: 'hmm',
  50                         listeners: {
  51                             click: function() {
  52                                 Ext.getCmp('container').layout.setActiveItem(0);
  53                                 Docs.History.push("");
  54                             }
  55                         }
  56                     },
  57                     {
  58                         cls: 'search',
  59                         id: 'search-container',
  60                         height: 40,
  61                         items: [
  62                             {
  63                                 xtype: 'triggerfield',
  64                                 triggerCls: 'reset',
  65                                 emptyText: 'Search',
  66                                 id: 'search-field',
  67                                 enableKeyEvents: true,
  68                                 hideTrigger: true,
  69                                 onTriggerClick: function() {
  70                                     this.reset();
  71                                     this.focus();
  72                                     this.setHideTrigger(true);
  73                                     Ext.getCmp('search-dropdown').hide();
  74                                 }
  75                             },
  76                             {
  77                                 xtype: 'searchdropdown'
  78                             }
  79                         ]
  80                     },
  81                     {
  82                         flex: 1,
  83                         xtype: 'classtree',
  84                         root: Docs.classData
  85                     }
  86                 ]
  87             },
  88             {
  89                 region: 'center',
  90                 id: 'center-container',
  91                 layout: 'fit',
  92                 minWidth: 800,
  93                 items: {
  94                     id: 'container',
  95                     xtype: 'container',
  96                     layout: 'card',
  97                     padding: '20',
  98                     cls: 'container',
  99                     items: [
 100                         {
 101                             autoScroll: true,
 102                             xtype: 'indexcontainer',
 103                             classData: Docs.overviewData
 104                         },
 105                         {
 106                             xtype: 'classcontainer'
 107                         },
 108                         {
 109                             autoScroll: true,
 110                             xtype: 'container',
 111                             id: 'guide'
 112                         }
 113                     ]
 114                 }
 115             }
 116         ];
 117
 118         this.callParent(arguments);
 119     }
 120 });