examples/init.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.ns('Ext.samples');
  16
  17 (function() {
  18
  19     Ext.define('Ext.samples.SamplePanel', {
  20         extend: 'Ext.view.View',
  21         alias: 'widget.samplepanel',
  22         autoHeight   : true,
  23         frame        : false,
  24         cls          : 'demos',
  25         itemSelector : 'dl',
  26         overItemCls  : 'over',
  27         trackOver    : true,
  28         tpl          : Ext.create('Ext.XTemplate',
  29             '<div id="sample-ct">',
  30                 '<tpl for=".">',
  31                 '<div><a name="{id}"></a><h2><div>{title}</div></h2>',
  32                 '<dl>',
  33                     '<tpl for="items">',
  34                         '<dd ext:url="{url}"><img src="shared/screens/{icon}"/>',
  35                             '<div><h4>{text}',
  36                                 '<tpl if="this.isNew(values.status)">',
  37                                     '<span class="new-sample"> (New)</span>',
  38                                 '</tpl>',
  39                                 '<tpl if="this.isUpdated(values.status)">',
  40                                     '<span class="updated-sample"> (Updated)</span>',
  41                                 '</tpl>',
  42                                 '<tpl if="this.isExperimental(values.status)">',
  43                                     '<span class="new-sample"> (Experimental)</span>',
  44                                 '</tpl>',
  45                             '</h4><p>{desc}</p></div>',
  46                         '</dd>',
  47                     '</tpl>',
  48                 '<div style="clear:left"></div></dl></div>',
  49                 '</tpl>',
  50             '</div>', {
  51              isExperimental: function(status){
  52                  return status == 'experimental';
  53              },
  54              isNew: function(status){
  55                  return status == 'new';
  56              },
  57              isUpdated: function(status){
  58                  return status == 'updated';
  59              }
  60         }),
  61
  62         onContainerClick: function(e) {
  63             var group = e.getTarget('h2', 3, true);
  64
  65             if (group) {
  66                 group.up('div').toggleCls('collapsed');
  67             }
  68         },
  69
  70         onItemClick : function(record, item, index, e){
  71             var t = e.getTarget('dd', 5, true);
  72
  73             if (t && !e.getTarget('a', 2)) {
  74                 var url = t.getAttributeNS('ext', 'url');
  75                 window.open(url);
  76             }
  77
  78             return this.callParent(arguments);
  79         }
  80     });
  81 })();
  82
  83 Ext.onReady(function() {
  84
  85     (Ext.defer(function() {
  86         // Instantiate Ext.App instance
  87         var App = Ext.create('Ext.App', {});
  88
  89         var catalog = Ext.samples.samplesCatalog;
  90
  91         for (var i = 0, c; c = catalog[i]; i++) {
  92             c.id = 'sample-' + i;
  93         }
  94
  95         var store = Ext.create('Ext.data.JsonStore', {
  96             idProperty : 'id',
  97             fields     : ['id', 'title', 'items'],
  98             data       : catalog
  99         });
 100
 101         var panel = Ext.create('Ext.Panel', {
 102             frame      : false,
 103             renderTo   : Ext.get('all-demos'),
 104             height     : 300,
 105             autoScroll : true,
 106             items      : Ext.create('Ext.samples.SamplePanel', {
 107                 store : store
 108             })
 109         });
 110
 111         var tpl = Ext.create('Ext.XTemplate',
 112             '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'
 113         );
 114         tpl.overwrite('sample-menu', catalog);
 115
 116         Ext.select('#sample-spacer').remove();
 117
 118         var headerEl  = Ext.get('hd'),
 119             footerEl  = Ext.get('ft'),
 120             bodyEl    = Ext.get('bd'),
 121             sideBoxEl = bodyEl.down('div[class=side-box]'),
 122             titleEl   = bodyEl.down('h1#pagetitle');
 123
 124         var doResize = function() {
 125             var windowHeight = Ext.getDoc().getViewSize(false).height;
 126
 127             var footerHeight  = footerEl.getHeight() + footerEl.getMargin().top,
 128                 titleElHeight = titleEl.getHeight() + titleEl.getMargin().top,
 129                 headerHeight  = headerEl.getHeight() + titleElHeight;
 130
 131             var warnEl = Ext.get('fb');
 132             var warnHeight = warnEl ? warnEl.getHeight() : 0;
 133
 134             var availHeight = windowHeight - ( footerHeight + headerHeight + 14) - warnHeight;
 135             var sideBoxHeight = sideBoxEl.getHeight();
 136
 137             panel.setHeight((availHeight > sideBoxHeight) ? availHeight : sideBoxHeight);
 138         };
 139
 140         // Resize on demand
 141         Ext.EventManager.onWindowResize(doResize);
 142
 143         var firebugWarning = function () {
 144             var cp = Ext.create('Ext.state.CookieProvider');
 145
 146             if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){
 147                 var tpl = Ext.create('Ext.Template',
 148                     '<div id="fb" style="border: 1px solid #FF0000; background-color:#FFAAAA; display:none; padding:15px; color:#000000;"><b>Warning: </b> Firebug is known to cause performance issues with Ext JS. <a href="#" id="hideWarning">[ Hide ]</a></div>'
 149                 );
 150                 var newEl = tpl.insertFirst('all-demos');
 151
 152                 Ext.fly('hideWarning').on('click', function() {
 153                     Ext.fly(newEl).slideOut('t',{remove:true});
 154                     cp.set('hideFBWarning', true);
 155                     doResize();
 156                 });
 157                 Ext.fly(newEl).slideIn();
 158                 doResize();
 159             }
 160         };
 161
 162         var hideMask = function () {
 163             Ext.get('loading').remove();
 164             Ext.fly('loading-mask').animate({
 165                 opacity:0,
 166                 remove:true,
 167                 callback: firebugWarning
 168             });
 169         };
 170
 171         Ext.defer(hideMask, 250);
 172         doResize();
 173
 174     },500));
 175 });
 176
 177