Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / view / data-view.js

diff --git a/examples/view/data-view.js b/examples/view/data-view.js
index 2e4f51c..2447766 100644 (file)
--- a/examples/view/data-view.js
+++ b/examples/view/data-view.js
@@ -1,69 +1,81 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.Loader.setConfig({enabled: true});
+
+Ext.Loader.setPath('Ext.ux.DataView', '../ux/DataView/');
+
+Ext.require([
+    'Ext.data.*',
+    'Ext.util.*',
+    'Ext.view.View',
+    'Ext.ux.DataView.DragSelector',
+    'Ext.ux.DataView.LabelEditor'
+]);
+
 Ext.onReady(function(){
-    var xd = Ext.data;
+    ImageModel = Ext.define('ImageModel', {
+        extend: 'Ext.data.Model',
+        fields: [
+           {name: 'name'},
+           {name: 'url'},
+           {name: 'size', type: 'float'},
+           {name:'lastmod', type:'date', dateFormat:'timestamp'}
+        ]
+    });
 
-    var store = new Ext.data.JsonStore({
-        url: 'get-images.php',
-        root: 'images',
-        fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
+    var store = Ext.create('Ext.data.Store', {
+        model: 'ImageModel',
+        proxy: {
+            type: 'ajax',
+            url: 'get-images.php',
+            reader: {
+                type: 'json',
+                root: 'images'
+            }
+        }
     });
     store.load();
 
-    var tpl = new Ext.XTemplate(
-               '<tpl for=".">',
-            '<div class="thumb-wrap" id="{name}">',
-                   '<div class="thumb"><img src="{url}" title="{name}"></div>',
-                   '<span class="x-editable">{shortName}</span></div>',
-        '</tpl>',
-        '<div class="x-clear"></div>'
-       );
-
-    var panel = new Ext.Panel({
-        id:'images-view',
-        frame:true,
-        width:535,
-        autoHeight:true,
-        collapsible:true,
-        layout:'fit',
-        title:'Simple DataView (0 items selected)',
-
-        items: new Ext.DataView({
+    Ext.create('Ext.Panel', {
+        id: 'images-view',
+        frame: true,
+        collapsible: true,
+        width: 535,
+        renderTo: 'dataview-example',
+        title: 'Simple DataView (0 items selected)',
+        items: Ext.create('Ext.view.View', {
             store: store,
-            tpl: tpl,
-            autoHeight:true,
+            tpl: [
+                '<tpl for=".">',
+                    '<div class="thumb-wrap" id="{name}">',
+                    '<div class="thumb"><img src="{url}" title="{name}"></div>',
+                    '<span class="x-editable">{shortName}</span></div>',
+                '</tpl>',
+                '<div class="x-clear"></div>'
+            ],
             multiSelect: true,
-            overClass:'x-view-over',
-            itemSelector:'div.thumb-wrap',
+            height: 310,
+            trackOver: true,
+            overItemCls: 'x-item-over',
+            itemSelector: 'div.thumb-wrap',
             emptyText: 'No images to display',
-
             plugins: [
-                new Ext.DataView.DragSelector(),
-                new Ext.DataView.LabelEditor({dataIndex: 'name'})
+                Ext.create('Ext.ux.DataView.DragSelector', {}),
+                Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
             ],
-
-            prepareData: function(data){
-                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
-                data.sizeString = Ext.util.Format.fileSize(data.size);
-                data.dateString = data.lastmod.format("m/d/Y g:i a");
+            prepareData: function(data) {
+                Ext.apply(data, {
+                    shortName: Ext.util.Format.ellipsis(data.name, 15),
+                    sizeString: Ext.util.Format.fileSize(data.size),
+                    dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
+                });
                 return data;
             },
-            
             listeners: {
-               selectionchange: {
-                       fn: function(dv,nodes){
-                               var l = nodes.length;
-                               var s = l != 1 ? 's' : '';
-                               panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
-                       }
-               }
+                selectionchange: function(dv, nodes ){
+                    var l = nodes.length,
+                        s = l !== 1 ? 's' : '';
+                    this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
+                }
             }
         })
     });
-    panel.render(document.body);
-
 });
\ No newline at end of file