X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/examples/view/data-view.js?ds=inline
diff --git a/examples/view/data-view.js b/examples/view/data-view.js
index a8c62bc1..2447766c 100644
--- a/examples/view/data-view.js
+++ b/examples/view/data-view.js
@@ -1,69 +1,81 @@
-/*!
- * Ext JS Library 3.1.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.onReady(function(){
- var xd = Ext.data;
-
- 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'}]
- });
- store.load();
-
- var tpl = new Ext.XTemplate(
- '',
- '',
- '',
- '
'
- );
-
- 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({
- store: store,
- tpl: tpl,
- autoHeight:true,
- multiSelect: true,
- overClass:'x-view-over',
- itemSelector:'div.thumb-wrap',
- emptyText: 'No images to display',
-
- plugins: [
- new Ext.DataView.DragSelector(),
- new Ext.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");
- 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)');
- }
- }
- }
- })
- });
- panel.render(document.body);
-
+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: [
+ '',
+ '',
+ '',
+ ''
+ ],
+ 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