1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| 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: [
| '<tpl for=".">',
| '<div class="thumb-wrap" id="{name:stripTags}">',
| '<div class="thumb"><img src="{url}" title="{name:htmlEncode}"></div>',
| '<span class="x-editable">{shortName:htmlEncode}</span>',
| '</div>',
| '</tpl>',
| '<div class="x-clear"></div>'
| ],
| 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)');
| }
| }
| })
| });
| });
|
|