src/examples/kitchensink/app/controller/Main.js

   1 /**
   2  * @class Kitchensink.controller.Main
   3  * @extends Ext.app.Controller
   4  *
   5  * This is an abstract base class that is extended by both the phone and tablet versions. This controller is
   6  * never directly instantiated, it just provides a set of common functionality that the phone and tablet
   7  * subclasses both extend.
   8  */
   9 Ext.define('Kitchensink.controller.Main', {
  10     extend: 'Ext.app.Controller',
  11
  12     config: {
  13         /**
  14          * @private
  15          */
  16         viewCache: [],
  17
  18         refs: {
  19             nav: '#mainNestedList',
  20             main: 'mainview',
  21             toolbar: '#mainNavigationBar',
  22             sourceButton: 'button[action=viewSource]',
  23             themeToggleButton: 'button[action=toggleTheme]',
  24
  25
  26             sourceOverlay: {
  27                 selector: 'sourceoverlay',
  28                 xtype: 'sourceoverlay',
  29                 autoCreate: true
  30             }
  31         },
  32
  33         control: {
  34             sourceButton: {
  35                 tap: 'onSourceTap'
  36             },
  37             themeToggleButton: {
  38                 tap: 'onThemeToggleTap'
  39             },
  40             nav: {
  41                 itemtap: 'onNavTap'
  42             }
  43         },
  44
  45         routes: {
  46             'demo/:id': 'showViewById',
  47             'menu/:id': 'showMenuById',
  48             '': 'showMenuById'
  49         },
  50
  51         /**
  52          * @cfg {Ext.data.Model} currentDemo The Demo that is currently loaded. This is set whenever showViewById
  53          * is called and used by functions like onSourceTap to fetch the source code for the current demo.
  54          */
  55         currentDemo: undefined
  56     },
  57
  58     /**
  59      * Finds a given view by ID and shows it. End-point of the "demo/:id" route
  60      */
  61     showViewById: function (id) {
  62         var nav = this.getNav(),
  63             view = nav.getStore().getNodeById(id);
  64
  65         this.showView(view);
  66         this.setCurrentDemo(view);
  67         this.hideSheets();
  68     },
  69
  70     /**
  71      * Shows the source code for the {@link #currentDemo} in an overlay
  72      */
  73     onSourceTap: function () {
  74         var overlay = this.getSourceOverlay(),
  75             demo = this.getCurrentDemo();
  76
  77         if (!overlay.getParent()) {
  78             Ext.Viewport.add(overlay);
  79         }
  80
  81         overlay.show();
  82
  83         overlay.setMasked({
  84             xtype: 'loadmask',
  85             message: 'Loading Source'
  86         });
  87
  88         if (demo) {
  89             Ext.Ajax.request({
  90                 url: '../../examples/kitchensink/app/view/' + (demo.get('view') || demo.get('text')) + '.js',
  91
  92                 callback: function (request, success, response) {
  93                     setTimeout(function() {
  94                         overlay.unmask();
  95                         overlay.setHtml(response.responseText);
  96                     }, 500);
  97                 }
  98             });
  99         }
 100     },
 101
 102     onThemeToggleTap: function() {
 103         switch(Ext.theme.name) {
 104             case "Tizen": {
 105                 if (!Kitchensink.app.getThemeVariationTransitionCls()) {
 106                     Kitchensink.app.setThemeVariationTransitionCls("tizenThemeTransition");
 107                 }
 108
 109                 if (Kitchensink.app.getThemeVariation() === "light") {
 110                     Kitchensink.app.setThemeVariation("dark");
 111                 } else {
 112                     Kitchensink.app.setThemeVariation("light");
 113                 }
 114             }
 115         }
 116
 117     },
 118
 119     /**
 120      * @private
 121      * In the kitchen sink we have a large number of dynamic views. If we were to keep all of them rendered
 122      * we'd risk causing the browser to run out of memory, especially on older devices. If we destroy them as
 123      * soon as we're done with them, the app can appear sluggish. Instead, we keep a small number of rendered
 124      * views in a viewCache so that we can easily reuse recently used views while destroying those we haven't
 125      * used in a while.
 126      * @param {String} name The full class name of the view to create (e.g. "Kitchensink.view.Forms")
 127      * @return {Ext.Component} The component, which may be from the cache
 128      */
 129     createView: function (item) {
 130         var name = this.getViewName(item),
 131             cache = this.getViewCache(),
 132             ln = cache.length,
 133             limit = item.get('limit') || 20,
 134             view, i = 0, j, oldView;
 135
 136         for (; i < ln; i++) {
 137             if (cache[i].viewName === name) {
 138                 return cache[i];
 139             }
 140         }
 141
 142         if (ln >= limit) {
 143             for (i = 0, j = 0; i < ln; i++) {
 144                 oldView = cache[i];
 145                 if (!oldView.isPainted()) {
 146                     oldView.destroy();
 147                 } else {
 148                     cache[j++] = oldView;
 149                 }
 150             }
 151             cache.length = j;
 152         }
 153
 154         view = Ext.create(name);
 155         view.viewName = name;
 156         cache.push(view);
 157         this.setViewCache(cache);
 158
 159         return view;
 160     },
 161
 162     /**
 163      * @private
 164      * Returns the full class name of the view to construct for a given Demo
 165      * @param {Kitchensink.model.Demo} item The demo
 166      * @return {String} The full class name of the view
 167      */
 168     getViewName: function (item) {
 169         var name = item.get('view') || item.get('text'),
 170             ns = 'Kitchensink.view.';
 171
 172         if (name == 'TouchEvents') {
 173             if (this.getApplication().getCurrentProfile().getName() === 'Tablet') {
 174                 return ns + 'tablet.' + name;
 175             } else {
 176                 return ns + 'phone.' + name;
 177             }
 178         } else {
 179             return ns + name;
 180         }
 181     },
 182
 183     /**
 184      * we iterate over all of the floating sheet components and make sure they're hidden when we
 185      * navigate to a new view. This stops things like Picker overlays staying visible when you hit
 186      * the browser's back button
 187      */
 188     hideSheets: function () {
 189         Ext.each(Ext.ComponentQuery.query('sheet, #editorPanel'), function (sheet) {
 190             if(sheet instanceof Ext.Menu) {
 191                 Ext.Viewport.hideMenu(sheet);
 192             }else {
 193                 sheet.setHidden(true);
 194             }
 195         });
 196     }
 197 });