examples/init.js

   1 Ext.ns('Ext.samples');
   2
   3 (function() {
   4
   5     Ext.define('Ext.samples.SamplePanel', {
   6         extend: 'Ext.view.View',
   7         alias: 'widget.samplepanel',
   8         autoHeight   : true,
   9         frame        : false,
  10         cls          : 'demos',
  11         itemSelector : 'dl',
  12         overItemCls  : 'over',
  13         trackOver    : true,
  14         tpl          : Ext.create('Ext.XTemplate',
  15             '<div id="sample-ct">',
  16                 '<tpl for=".">',
  17                 '<div><a name="{id}"></a><h2><div>{title}</div></h2>',
  18                 '<dl>',
  19                     '<tpl for="samples">',
  20                         '<dd ext:url="{url}"><img src="shared/screens/{icon}"/>',
  21                             '<div><h4>{text}',
  22                                 '<tpl if="this.isNew(values.status)">',
  23                                     '<span class="new-sample"> (New)</span>',
  24                                 '</tpl>',
  25                                 '<tpl if="this.isUpdated(values.status)">',
  26                                     '<span class="updated-sample"> (Updated)</span>',
  27                                 '</tpl>',
  28                                 '<tpl if="this.isExperimental(values.status)">',
  29                                     '<span class="new-sample"> (Experimental)</span>',
  30                                 '</tpl>',
  31                             '</h4><p>{desc}</p></div>',
  32                         '</dd>',
  33                     '</tpl>',
  34                 '<div style="clear:left"></div></dl></div>',
  35                 '</tpl>',
  36             '</div>', {
  37              isExperimental: function(status){
  38                  return status == 'experimental';
  39              },
  40              isNew: function(status){
  41                  return status == 'new';
  42              },
  43              isUpdated: function(status){
  44                  return status == 'updated';
  45              }
  46         }),
  47
  48         onContainerClick: function(e) {
  49             var group = e.getTarget('h2', 3, true);
  50
  51             if (group) {
  52                 group.up('div').toggleCls('collapsed');
  53             }
  54         },
  55
  56         onItemClick : function(record, item, index, e){
  57             var t = e.getTarget('dd', 5, true);
  58
  59             if (t && !e.getTarget('a', 2)) {
  60                 var url = t.getAttributeNS('ext', 'url');
  61                 window.open(url);
  62             }
  63
  64             return this.callParent(arguments);
  65         }
  66     });
  67 })();
  68
  69 Ext.onReady(function() {
  70
  71     (Ext.defer(function() {
  72         // Instantiate Ext.App instance
  73         var App = Ext.create('Ext.App', {});
  74
  75         var catalog = Ext.samples.samplesCatalog;
  76
  77         for (var i = 0, c; c = catalog[i]; i++) {
  78             c.id = 'sample-' + i;
  79         }
  80
  81         var store = Ext.create('Ext.data.JsonStore', {
  82             idProperty : 'id',
  83             fields     : ['id', 'title', 'samples'],
  84             data       : catalog
  85         });
  86
  87         var panel = Ext.create('Ext.Panel', {
  88             frame      : false,
  89             renderTo   : Ext.get('all-demos'),
  90             height     : 300,
  91             autoScroll : true,
  92             items      : Ext.create('Ext.samples.SamplePanel', {
  93                 store : store
  94             })
  95         });
  96
  97         var tpl = Ext.create('Ext.XTemplate',
  98             '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'
  99         );
 100         tpl.overwrite('sample-menu', catalog);
 101
 102         Ext.select('#sample-spacer').remove();
 103
 104         var headerEl  = Ext.get('hd'),
 105             footerEl  = Ext.get('ft'),
 106             bodyEl    = Ext.get('bd'),
 107             sideBoxEl = bodyEl.down('div[class=side-box]'),
 108             titleEl   = bodyEl.down('h1#pagetitle');
 109
 110         var doResize = function() {
 111             var windowHeight = Ext.getDoc().getViewSize(false).height;
 112
 113             var footerHeight  = footerEl.getHeight() + footerEl.getMargin().top,
 114                 titleElHeight = titleEl.getHeight() + titleEl.getMargin().top,
 115                 headerHeight  = headerEl.getHeight() + titleElHeight;
 116
 117             var warnEl = Ext.get('fb');
 118             var warnHeight = warnEl ? warnEl.getHeight() : 0;
 119
 120             var availHeight = windowHeight - ( footerHeight + headerHeight + 14) - warnHeight;
 121             var sideBoxHeight = sideBoxEl.getHeight();
 122
 123             panel.setHeight((availHeight > sideBoxHeight) ? availHeight : sideBoxHeight);
 124         };
 125
 126         // Resize on demand
 127         Ext.EventManager.onWindowResize(doResize);
 128
 129         var firebugWarning = function () {
 130             var cp = Ext.create('Ext.state.CookieProvider');
 131
 132             if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){
 133                 var tpl = Ext.create('Ext.Template',
 134                     '<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>'
 135                 );
 136                 var newEl = tpl.insertFirst('all-demos');
 137
 138                 Ext.fly('hideWarning').on('click', function() {
 139                     Ext.fly(newEl).slideOut('t',{remove:true});
 140                     cp.set('hideFBWarning', true);
 141                     doResize();
 142                 });
 143                 Ext.fly(newEl).slideIn();
 144                 doResize();
 145             }
 146         };
 147
 148         var hideMask = function () {
 149             Ext.get('loading').remove();
 150             Ext.fly('loading-mask').animate({
 151                 opacity:0,
 152                 remove:true,
 153                 callback: firebugWarning
 154             });
 155         };
 156
 157         Ext.defer(hideMask, 250);
 158         doResize();
 159
 160     },500));
 161 });