X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/init.js

diff --git a/examples/init.js b/examples/init.js
index 3d254861..8730617a 100644
--- a/examples/init.js
+++ b/examples/init.js
@@ -1,161 +1,161 @@
-/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
 Ext.ns('Ext.samples');
 
 (function() {
 
-SamplePanel = Ext.extend(Ext.DataView, {
-    autoHeight   : true,
-    frame        : true,
-    cls          : 'demos',
-    itemSelector : 'dd',
-    overClass    : 'over',
-    tpl          : new Ext.XTemplate(
-        '<div id="sample-ct">',
-            '<tpl for=".">',
-            '<div><a name="{id}"></a><h2><div>{title}</div></h2>',
-            '<dl>',
-                '<tpl for="samples">',
-                    '<dd ext:url="{url}"><img src="shared/screens/{icon}"/>',
-                        '<div><h4>{text}',
-                            '<tpl if="this.isNew(values.status)">',
-                                '<span class="new-sample"> (New)</span>',
-                            '</tpl>',
-                            '<tpl if="this.isUpdated(values.status)">',
-                                '<span class="updated-sample"> (Updated)</span>',
-                            '</tpl>',
-                            '<tpl if="this.isExperimental(values.status)">',
-                                '<span class="new-sample"> (Experimental)</span>',
-                            '</tpl>',
-                        '</h4><p>{desc}</p></div>',
-                    '</dd>',
+    Ext.define('Ext.samples.SamplePanel', {
+        extend: 'Ext.view.View',
+        alias: 'widget.samplepanel',
+        autoHeight   : true,
+        frame        : false,
+        cls          : 'demos',
+        itemSelector : 'dl',
+        overItemCls  : 'over',
+        trackOver    : true,
+        tpl          : Ext.create('Ext.XTemplate',
+            '<div id="sample-ct">',
+                '<tpl for=".">',
+                '<div><a name="{id}"></a><h2><div>{title}</div></h2>',
+                '<dl>',
+                    '<tpl for="samples">',
+                        '<dd ext:url="{url}"><img src="shared/screens/{icon}"/>',
+                            '<div><h4>{text}',
+                                '<tpl if="this.isNew(values.status)">',
+                                    '<span class="new-sample"> (New)</span>',
+                                '</tpl>',
+                                '<tpl if="this.isUpdated(values.status)">',
+                                    '<span class="updated-sample"> (Updated)</span>',
+                                '</tpl>',
+                                '<tpl if="this.isExperimental(values.status)">',
+                                    '<span class="new-sample"> (Experimental)</span>',
+                                '</tpl>',
+                            '</h4><p>{desc}</p></div>',
+                        '</dd>',
+                    '</tpl>',
+                '<div style="clear:left"></div></dl></div>',
                 '</tpl>',
-            '<div style="clear:left"></div></dl></div>',
-            '</tpl>',
-        '</div>', {
-         isExperimental: function(status){
-             return status == 'experimental';
-         },
-         isNew: function(status){
-             return status == 'new';
-         },
-         isUpdated: function(status){
-             return status == 'updated';
-         }
-    }),
-
-
-    onClick : function(e){
-        var group = e.getTarget('h2', 3, true);
-        if(group){
-            group.up('div').toggleClass('collapsed');
-        }else {
+            '</div>', {
+             isExperimental: function(status){
+                 return status == 'experimental';
+             },
+             isNew: function(status){
+                 return status == 'new';
+             },
+             isUpdated: function(status){
+                 return status == 'updated';
+             }
+        }),
+
+        onContainerClick: function(e) {
+            var group = e.getTarget('h2', 3, true);
+            
+            if (group) {
+                group.up('div').toggleCls('collapsed');
+            }
+        },
+        
+        onItemClick : function(record, item, index, e){
             var t = e.getTarget('dd', 5, true);
-            if(t && !e.getTarget('a', 2)){
+            
+            if (t && !e.getTarget('a', 2)) {
                 var url = t.getAttributeNS('ext', 'url');
                 window.open(url);
             }
+            
+            return this.callParent(arguments);
         }
-        return SamplePanel.superclass.onClick.apply(this, arguments);
-    }
-});
-Ext.samples.SamplePanel = SamplePanel;
-Ext.reg('samplespanel', Ext.samples.SamplePanel);
+    });
 })();
 
-Ext.onReady(function(){
-
+Ext.onReady(function() {
 
-// Instantiate Ext.App instance
-    App = new Ext.App({});
+    (Ext.defer(function() {
+        // Instantiate Ext.App instance
+        var App = Ext.create('Ext.App', {});
 
-    var catalog = Ext.samples.samplesCatalog;
+        var catalog = Ext.samples.samplesCatalog;
 
-    for(var i = 0, c; c = catalog[i]; i++){
-        c.id = 'sample-' + i;
-    }
+        for (var i = 0, c; c = catalog[i]; i++) {
+            c.id = 'sample-' + i;
+        }
 
-    var store = new Ext.data.JsonStore({
-        idProperty : 'id',
-        fields     : ['id', 'title', 'samples'],
-        data       : catalog
-    });
+        var store = Ext.create('Ext.data.JsonStore', {
+            idProperty : 'id',
+            fields     : ['id', 'title', 'samples'],
+            data       : catalog
+        });
 
-    var panel = new Ext.Panel({
-        frame      : true,
-        renderTo   : 'all-demos',
-        height     : 300,
-        autoScroll : true,
-        items      : new SamplePanel({
-            store : store
-        })
-    });
+        var panel = Ext.create('Ext.Panel', {
+            frame      : false,
+            renderTo   : Ext.get('all-demos'),
+            height     : 300,
+            autoScroll : true,
+            items      : Ext.create('Ext.samples.SamplePanel', {
+                store : store
+            })
+        });
 
-    var tpl = new Ext.XTemplate(
-        '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'
-    );
-    tpl.overwrite('sample-menu', catalog);
+        var tpl = Ext.create('Ext.XTemplate',
+            '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'
+        );
+        tpl.overwrite('sample-menu', catalog);
 
-    Ext.select('#sample-spacer').remove();
+        Ext.select('#sample-spacer').remove();
 
-    var headerEl  = Ext.get('hd'),
-        footerEl  = Ext.get('ft'),
-        bodyEl    = Ext.get('bd'),
-        sideBoxEl = bodyEl.child('div[class=side-box]'),
-        titleEl   = bodyEl.child('h3:first-child');
+        var headerEl  = Ext.get('hd'),
+            footerEl  = Ext.get('ft'),
+            bodyEl    = Ext.get('bd'),
+            sideBoxEl = bodyEl.down('div[class=side-box]'),
+            titleEl   = bodyEl.down('h1#pagetitle');
 
-    var doResize = function() {
-        var windowHeight = Ext.getDoc().getViewSize().height;
+        var doResize = function() {
+            var windowHeight = Ext.getDoc().getViewSize(false).height;
 
-        var footerHeight  = footerEl.getHeight() + footerEl.getMargins().top,
-            titleElHeight = titleEl.getHeight() + titleEl.getMargins().top,
-            brElHeight    = bodyEl.child('br').getHeight(),
-            headerHeight  = headerEl.getHeight() + titleElHeight + brElHeight;
+            var footerHeight  = footerEl.getHeight() + footerEl.getMargin().top,
+                titleElHeight = titleEl.getHeight() + titleEl.getMargin().top,
+                headerHeight  = headerEl.getHeight() + titleElHeight;
 
-        var warnEl = Ext.get('fb');
-        var warnHeight = warnEl ? warnEl.getHeight() : 0;
+            var warnEl = Ext.get('fb');
+            var warnHeight = warnEl ? warnEl.getHeight() : 0;
 
-        var availHeight = windowHeight - ( footerHeight + headerHeight + 14) - warnHeight;
-        var sideBoxHeight = sideBoxEl.getHeight();
+            var availHeight = windowHeight - ( footerHeight + headerHeight + 14) - warnHeight;
+            var sideBoxHeight = sideBoxEl.getHeight();
 
-        panel.setHeight((availHeight > sideBoxHeight) ? availHeight : sideBoxHeight);
-    }
+            panel.setHeight((availHeight > sideBoxHeight) ? availHeight : sideBoxHeight);
+        };
 
-    // Resize on demand
-    Ext.EventManager.onWindowResize(doResize);
+        // Resize on demand
+        Ext.EventManager.onWindowResize(doResize);
 
-    var firebugWarning = function () {
-        var cp = new Ext.state.CookieProvider();
+        var firebugWarning = function () {
+            var cp = Ext.create('Ext.state.CookieProvider');
 
-        if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){
-            var tpl = new Ext.Template(
-                '<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>'
-            );
-            var newEl = tpl.insertFirst('all-demos');
+            if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){
+                var tpl = Ext.create('Ext.Template',
+                    '<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>'
+                );
+                var newEl = tpl.insertFirst('all-demos');
 
-            Ext.fly('hideWarning').on('click', function() {
-                Ext.fly(newEl).slideOut('t',{remove:true});
-                cp.set('hideFBWarning', true);
+                Ext.fly('hideWarning').on('click', function() {
+                    Ext.fly(newEl).slideOut('t',{remove:true});
+                    cp.set('hideFBWarning', true);
+                    doResize();
+                });
+                Ext.fly(newEl).slideIn();
                 doResize();
+            }
+        };
+
+        var hideMask = function () {
+            Ext.get('loading').remove();
+            Ext.fly('loading-mask').animate({
+                opacity:0,
+                remove:true,
+                callback: firebugWarning
             });
-            Ext.fly(newEl).slideIn();
-            doResize();
-        }
-    }
+        };
 
-    var hideMask = function () {
-        Ext.get('loading').remove();
-        Ext.fly('loading-mask').fadeOut({
-            remove:true,
-            callback : firebugWarning
-        });
-    }
-
-    hideMask.defer(250);
-    doResize();
+        Ext.defer(hideMask, 250);
+        doResize();
 
-});
\ No newline at end of file
+    },500));
+});