-/*!
- * Ext JS Library 3.1.0
- * Copyright(c) 2006-2009 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