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  */
  11 Ext.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 });