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

https://bitbucket.org/srogerf/javascript · 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. */
  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. tpl: [
  20. '<tpl for=".">',
  21. '<div class="thumb-wrap">',
  22. '<div class="thumb">',
  23. (!Ext.isIE6? '<img src="../view/chooser/icons/{thumb}" />' :
  24. '<div style="width:76px;height:76px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'../view/chooser/icons/{thumb}\')"></div>'),
  25. '</div>',
  26. '<span>{name}</span>',
  27. '</div>',
  28. '</tpl>'
  29. ],
  30. itemSelector: 'div.thumb-wrap',
  31. multiSelect: true,
  32. singleSelect: false,
  33. cls: 'x-image-view',
  34. autoScroll: true,
  35. initComponent: function() {
  36. this.store = Ext.create('Ext.data.Store', {
  37. autoLoad: true,
  38. fields: ['name', 'thumb', {name: 'leaf', defaultValue: true}],
  39. proxy: {
  40. type: 'ajax',
  41. url : '../view/chooser/icons.json',
  42. reader: {
  43. type: 'json',
  44. root: ''
  45. }
  46. }
  47. });
  48. this.mixins.dragSelector.init(this);
  49. this.mixins.draggable.init(this, {
  50. ddConfig: {
  51. ddGroup: 'organizerDD'
  52. },
  53. ghostTpl: [
  54. '<tpl for=".">',
  55. '<img src="../view/chooser/icons/{thumb}" />',
  56. '<tpl if="xindex % 4 == 0"><br /></tpl>',
  57. '</tpl>',
  58. '<div class="count">',
  59. '{[values.length]} images selected',
  60. '<div>'
  61. ]
  62. });
  63. this.callParent();
  64. }
  65. });