/ext-4.1.0_b3/docs/extjs/examples/organizer/ImageView.js
JavaScript | 70 lines | 55 code | 5 blank | 10 comment | 0 complexity | c5c43b82fe98c82a55a59a680fc45311 MD5 | raw file
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});