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

diff --git a/examples/init.js b/examples/init.js
index d6d0ee63..8730617a 100644
--- a/examples/init.js
+++ b/examples/init.js
@@ -1,76 +1,76 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.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() {
-    (function() {
+
+    (Ext.defer(function() {
         // Instantiate Ext.App instance
-        App = new Ext.App({});
+        var App = Ext.create('Ext.App', {});
 
         var catalog = Ext.samples.samplesCatalog;
 
@@ -78,23 +78,23 @@ Ext.onReady(function() {
             c.id = 'sample-' + i;
         }
 
-        var store = new Ext.data.JsonStore({
+        var store = Ext.create('Ext.data.JsonStore', {
             idProperty : 'id',
             fields     : ['id', 'title', 'samples'],
             data       : catalog
         });
 
-        var panel = new Ext.Panel({
-            frame      : true,
+        var panel = Ext.create('Ext.Panel', {
+            frame      : false,
             renderTo   : Ext.get('all-demos'),
             height     : 300,
             autoScroll : true,
-            items      : new SamplePanel({
+            items      : Ext.create('Ext.samples.SamplePanel', {
                 store : store
             })
         });
 
-        var tpl = new Ext.XTemplate(
+        var tpl = Ext.create('Ext.XTemplate',
             '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'
         );
         tpl.overwrite('sample-menu', catalog);
@@ -104,14 +104,14 @@ Ext.onReady(function() {
         var headerEl  = Ext.get('hd'),
             footerEl  = Ext.get('ft'),
             bodyEl    = Ext.get('bd'),
-            sideBoxEl = bodyEl.child('div[class=side-box]'),
-            titleEl   = bodyEl.child('h1#pagetitle');
+            sideBoxEl = bodyEl.down('div[class=side-box]'),
+            titleEl   = bodyEl.down('h1#pagetitle');
 
         var doResize = function() {
             var windowHeight = Ext.getDoc().getViewSize(false).height;
 
-            var footerHeight  = footerEl.getHeight() + footerEl.getMargins().top,
-                titleElHeight = titleEl.getHeight() + titleEl.getMargins().top,
+            var footerHeight  = footerEl.getHeight() + footerEl.getMargin().top,
+                titleElHeight = titleEl.getHeight() + titleEl.getMargin().top,
                 headerHeight  = headerEl.getHeight() + titleElHeight;
 
             var warnEl = Ext.get('fb');
@@ -127,10 +127,10 @@ Ext.onReady(function() {
         Ext.EventManager.onWindowResize(doResize);
 
         var firebugWarning = function () {
-            var cp = new Ext.state.CookieProvider();
+            var cp = Ext.create('Ext.state.CookieProvider');
 
             if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){
-                var tpl = new Ext.Template(
+                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');
@@ -147,13 +147,15 @@ Ext.onReady(function() {
 
         var hideMask = function () {
             Ext.get('loading').remove();
-            Ext.fly('loading-mask').fadeOut({
+            Ext.fly('loading-mask').animate({
+                opacity:0,
                 remove:true,
-                callback : firebugWarning
+                callback: firebugWarning
             });
         };
 
-        hideMask.defer(250);
+        Ext.defer(hideMask, 250);
         doResize();
-    }).defer(500);
-});
\ No newline at end of file
+
+    },500));
+});