examples/init.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.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
  72
  73 // Instantiate Ext.App instance
  74     App = new Ext.App({});
  75
  76     var catalog = Ext.samples.samplesCatalog;
  77
  78     for(var i = 0, c; c = catalog[i]; i++){
  79         c.id = 'sample-' + i;
  80     }
  81
  82     var store = new Ext.data.JsonStore({
  83         idProperty : 'id',
  84         fields     : ['id', 'title', 'samples'],
  85         data       : catalog
  86     });
  87
  88     var panel = new Ext.Panel({
  89         frame      : true,
  90         renderTo   : 'all-demos',
  91         height     : 300,
  92         autoScroll : true,
  93         items      : new SamplePanel({
  94             store : store
  95         })
  96     });
  97
  98     var tpl = new Ext.XTemplate(
  99         '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'
 100     );
 101     tpl.overwrite('sample-menu', catalog);
 102
 103     Ext.select('#sample-spacer').remove();
 104
 105     var headerEl  = Ext.get('hd'),
 106         footerEl  = Ext.get('ft'),
 107         bodyEl    = Ext.get('bd'),
 108         sideBoxEl = bodyEl.child('div[class=side-box]'),
 109         titleEl   = bodyEl.child('h3:first-child');
 110
 111     var doResize = function() {
 112         var windowHeight = Ext.getDoc().getViewSize(false).height;
 113
 114         var footerHeight  = footerEl.getHeight() + footerEl.getMargins().top,
 115             titleElHeight = titleEl.getHeight() + titleEl.getMargins().top,
 116             brElHeight    = bodyEl.child('br').getHeight(),
 117             headerHeight  = headerEl.getHeight() + titleElHeight + brElHeight;
 118
 119         var warnEl = Ext.get('fb');
 120         var warnHeight = warnEl ? warnEl.getHeight() : 0;
 121
 122         var availHeight = windowHeight - ( footerHeight + headerHeight + 14) - warnHeight;
 123         var sideBoxHeight = sideBoxEl.getHeight();
 124
 125         panel.setHeight((availHeight > sideBoxHeight) ? availHeight : sideBoxHeight);
 126     }
 127
 128     // Resize on demand
 129     Ext.EventManager.onWindowResize(doResize);
 130
 131     var firebugWarning = function () {
 132         var cp = new Ext.state.CookieProvider();
 133
 134         if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){
 135             var tpl = new Ext.Template(
 136                 '<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>'
 137             );
 138             var newEl = tpl.insertFirst('all-demos');
 139
 140             Ext.fly('hideWarning').on('click', function() {
 141                 Ext.fly(newEl).slideOut('t',{remove:true});
 142                 cp.set('hideFBWarning', true);
 143                 doResize();
 144             });
 145             Ext.fly(newEl).slideIn();
 146             doResize();
 147         }
 148     }
 149
 150     var hideMask = function () {
 151         Ext.get('loading').remove();
 152         Ext.fly('loading-mask').fadeOut({
 153             remove:true,
 154             callback : firebugWarning
 155         });
 156     }
 157
 158     hideMask.defer(250);
 159     doResize();
 160
 161 });