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