83 lines
No EOL
2.5 KiB
JavaScript
83 lines
No EOL
2.5 KiB
JavaScript
/*
|
|
This file is part of Ext JS 3.4
|
|
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
|
|
Contact: http://www.sencha.com/contact
|
|
|
|
GNU General Public License Usage
|
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
|
packaging of this file.
|
|
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
|
at http://www.sencha.com/contact.
|
|
|
|
Build date: 2013-04-03 15:07:25
|
|
*/
|
|
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(
|
|
'<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({
|
|
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);
|
|
|
|
}); |