2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
9 Ext.onReady(function(){
\r
12 var store = new Ext.data.JsonStore({
\r
13 url: 'get-images.php',
\r
15 fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
\r
19 var tpl = new Ext.XTemplate(
\r
21 '<div class="thumb-wrap" id="{name}">',
\r
22 '<div class="thumb"><img src="{url}" title="{name}"></div>',
\r
23 '<span class="x-editable">{shortName}</span></div>',
\r
25 '<div class="x-clear"></div>'
\r
28 var panel = new Ext.Panel({
\r
35 title:'Simple DataView (0 items selected)',
\r
37 items: new Ext.DataView({
\r
42 overClass:'x-view-over',
\r
43 itemSelector:'div.thumb-wrap',
\r
44 emptyText: 'No images to display',
\r
47 new Ext.DataView.DragSelector(),
\r
48 new Ext.DataView.LabelEditor({dataIndex: 'name'})
\r
51 prepareData: function(data){
\r
52 data.shortName = Ext.util.Format.ellipsis(data.name, 15);
\r
53 data.sizeString = Ext.util.Format.fileSize(data.size);
\r
54 data.dateString = data.lastmod.format("m/d/Y g:i a");
\r
60 fn: function(dv,nodes){
\r
61 var l = nodes.length;
\r
62 var s = l != 1 ? 's' : '';
\r
63 panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
\r
69 panel.render(document.body);
\r