examples/init.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 Ext.ns('Ext.samples');
   8
   9 (function() {
  10
  11 SamplePanel = Ext.extend(Ext.DataView, {
  12     autoHeight   : true,
  13     frame        : true,
  14     cls          : 'demos',
  15     itemSelector : 'dd',
  16     overClass    : 'over',
  17     tpl          : new Ext.XTemplate(
  18         '<div id="sample-ct">',
  19             '<tpl for=".">',
  20             '<div><a name="{id}"></a><h2><div>{title}</div></h2>',
  21             '<dl>',
  22                 '<tpl for="samples">',
  23                     '<dd ext:url="{url}"><img src="shared/screens/{icon}"/>',
  24                         '<div><h4>{text}',
  25                             '<tpl if="this.isNew(values.status)">',
  26                                 '<span class="new-sample"> (New)</span>',
  27                             '</tpl>',
  28                             '<tpl if="this.isUpdated(values.status)">',
  29                                 '<span class="updated-sample"> (Updated)</span>',
  30                             '</tpl>',
  31                             '<tpl if="this.isExperimental(values.status)">',
  32                                 '<span class="new-sample"> (Experimental)</span>',
  33                             '</tpl>',
  34                         '</h4><p>{desc}</p></div>',
  35                     '</dd>',
  36                 '</tpl>',
  37             '<div style="clear:left"></div></dl></div>',
  38             '</tpl>',
  39         '</div>', {
  40          isExperimental: function(status){
  41              return status == 'experimental';
  42          },
  43          isNew: function(status){
  44              return status == 'new';
  45          },
  46          isUpdated: function(status){
  47              return status == 'updated';
  48          }
  49     }),
  50
  51
  52     onClick : function(e){
  53         var group = e.getTarget('h2', 3, true);
  54         if(group){
  55             group.up('div').toggleClass('collapsed');
  56         }else {
  57             var t = e.getTarget('dd', 5, true);
  58             if(t && !e.getTarget('a', 2)){
  59                 var url = t.getAttributeNS('ext', 'url');
  60                 window.open(url);
  61             }
  62         }
  63         return SamplePanel.superclass.onClick.apply(this, arguments);
  64     }
  65 });
  66 Ext.samples.SamplePanel = SamplePanel;
  67 Ext.reg('samplespanel', Ext.samples.SamplePanel);
  68 })();
  69
  70 Ext.onReady(function() {
  71     (function() {
  72         // Instantiate Ext.App instance
  73         App = new 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 = new Ext.data.JsonStore({
  82             idProperty : 'id',
  83             fields     : ['id', 'title', 'samples'],
  84             data       : catalog
  85         });
  86
  87         var panel = new Ext.Panel({
  88             frame      : true,
  89             renderTo   : Ext.get('all-demos'),
  90             height     : 300,
  91             autoScroll : true,
  92             items      : new SamplePanel({
  93                 store : store
  94             })
  95         });
  96
  97         var tpl = new 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.child('div[class=side-box]'),
 108             titleEl   = bodyEl.child('h1#pagetitle');
 109
 110         var doResize = function() {
 111             var windowHeight = Ext.getDoc().getViewSize(false).height;
 112
 113             var footerHeight  = footerEl.getHeight() + footerEl.getMargins().top,
 114                 titleElHeight = titleEl.getHeight() + titleEl.getMargins().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 = new Ext.state.CookieProvider();
 131
 132             if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){
 133                 var tpl = new 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').fadeOut({
 151                 remove:true,
 152                 callback : firebugWarning
 153             });
 154         };
 155
 156         hideMask.defer(250);
 157         doResize();
 158     }).defer(500);
 159 });