-/*!
- * Ext JS Library 3.2.2
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.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