/ext-4.1.0_b3/docs/extjs/examples/organizer/ImageView.js

 1/**
 2 * @class Ext.org.ImageView
 3 * @extends Ext.view.View
 4 * @xtype imageview
 5 *
 6 * This class implements the "My Images" view (the images in the organizer). This class
 7 * incorporates {@link Ext.ux.DataView.Draggable Draggable} to enable dragging items as
 8 * well as {@link Ext.ux.DataView.DragSelector DragSelector} to allow multiple selection
 9 * by simply clicking and dragging the mouse.
10 */
11Ext.define('Ext.org.ImageView', {
12    extend: 'Ext.view.View',
13    alias : 'widget.imageview',
14    requires: ['Ext.data.Store'],
15    mixins: {
16        dragSelector: 'Ext.ux.DataView.DragSelector',
17        draggable   : 'Ext.ux.DataView.Draggable'
18    },
19    
20    tpl: [
21        '<tpl for=".">',
22            '<div class="thumb-wrap">',
23                '<div class="thumb">',
24                    (!Ext.isIE6? '<img src="../view/chooser/icons/{thumb}" />' : 
25                    '<div style="width:76px;height:76px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'../view/chooser/icons/{thumb}\')"></div>'),
26                '</div>',
27                '<span>{name}</span>',
28            '</div>',
29        '</tpl>'
30    ],
31    
32    itemSelector: 'div.thumb-wrap',
33    multiSelect: true,
34    singleSelect: false,
35    cls: 'x-image-view',
36    autoScroll: true,
37    
38    initComponent: function() {
39        this.store = Ext.create('Ext.data.Store', {
40            autoLoad: true,
41            fields: ['name', 'thumb', {name: 'leaf', defaultValue: true}],
42            proxy: {
43                type: 'ajax',
44                url : '../view/chooser/icons.json',
45                reader: {
46                    type: 'json',
47                    root: ''
48                }
49            }
50        });
51        
52        this.mixins.dragSelector.init(this);
53        this.mixins.draggable.init(this, {
54            ddConfig: {
55                ddGroup: 'organizerDD'
56            },
57            ghostTpl: [
58                '<tpl for=".">',
59                    '<img src="../view/chooser/icons/{thumb}" />',
60                    '<tpl if="xindex % 4 == 0"><br /></tpl>',
61                '</tpl>',
62                '<div class="count">',
63                    '{[values.length]} images selected',
64                '<div>'
65            ]
66        });
67        
68        this.callParent();
69    }
70});