3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
7 Ext.onReady(function(){
\r
10 var store = new Ext.data.JsonStore({
\r
11 url: 'get-images.php',
\r
13 fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
\r
17 var tpl = new Ext.XTemplate(
\r
19 '<div class="thumb-wrap" id="{name}">',
\r
20 '<div class="thumb"><img src="{url}" title="{name}"></div>',
\r
21 '<span class="x-editable">{shortName}</span></div>',
\r
23 '<div class="x-clear"></div>'
\r
26 var panel = new Ext.Panel({
\r
33 title:'Simple DataView (0 items selected)',
\r
35 items: new Ext.DataView({
\r
40 overClass:'x-view-over',
\r
41 itemSelector:'div.thumb-wrap',
\r
42 emptyText: 'No images to display',
\r
45 new Ext.DataView.DragSelector(),
\r
46 new Ext.DataView.LabelEditor({dataIndex: 'name'})
\r
49 prepareData: function(data){
\r
50 data.shortName = Ext.util.Format.ellipsis(data.name, 15);
\r
51 data.sizeString = Ext.util.Format.fileSize(data.size);
\r
52 data.dateString = data.lastmod.format("m/d/Y g:i a");
\r
58 fn: function(dv,nodes){
\r
59 var l = nodes.length;
\r
60 var s = l != 1 ? 's' : '';
\r
61 panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
\r
67 panel.render(document.body);
\r