docs/source/init.html

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