/ext-4.1.0_b3/examples/ux/ToolbarDroppable.js

https://bitbucket.org/srogerf/javascript · JavaScript · 155 lines · 64 code · 20 blank · 71 comment · 4 complexity · a2ab42237fd84d002262644a7734fbc5 MD5 · raw file

  1. /**
  2. * @class Ext.ux.ToolbarDroppable
  3. * @extends Object
  4. * Plugin which allows items to be dropped onto a toolbar and be turned into new Toolbar items.
  5. * To use the plugin, you just need to provide a createItem implementation that takes the drop
  6. * data as an argument and returns an object that can be placed onto the toolbar. Example:
  7. * <pre>
  8. * Ext.create('Ext.ux.ToolbarDroppable', {
  9. * createItem: function(data) {
  10. * return Ext.create('Ext.Button', {text: data.text});
  11. * }
  12. * });
  13. * </pre>
  14. * The afterLayout function can also be overridden, and is called after a new item has been
  15. * created and inserted into the Toolbar. Use this for any logic that needs to be run after
  16. * the item has been created.
  17. */
  18. Ext.define('Ext.ux.ToolbarDroppable', {
  19. extend: 'Object',
  20. /**
  21. * @constructor
  22. */
  23. constructor: function(config) {
  24. Ext.apply(this, config);
  25. },
  26. /**
  27. * Initializes the plugin and saves a reference to the toolbar
  28. * @param {Ext.toolbar.Toolbar} toolbar The toolbar instance
  29. */
  30. init: function(toolbar) {
  31. /**
  32. * @property toolbar
  33. * @type Ext.toolbar.Toolbar
  34. * The toolbar instance that this plugin is tied to
  35. */
  36. this.toolbar = toolbar;
  37. this.toolbar.on({
  38. scope : this,
  39. render: this.createDropTarget
  40. });
  41. },
  42. /**
  43. * Creates a drop target on the toolbar
  44. */
  45. createDropTarget: function() {
  46. /**
  47. * @property dropTarget
  48. * @type Ext.dd.DropTarget
  49. * The drop target attached to the toolbar instance
  50. */
  51. this.dropTarget = Ext.create('Ext.dd.DropTarget', this.toolbar.getEl(), {
  52. notifyOver: Ext.Function.bind(this.notifyOver, this),
  53. notifyDrop: Ext.Function.bind(this.notifyDrop, this)
  54. });
  55. },
  56. /**
  57. * Adds the given DD Group to the drop target
  58. * @param {String} ddGroup The DD Group
  59. */
  60. addDDGroup: function(ddGroup) {
  61. this.dropTarget.addToGroup(ddGroup);
  62. },
  63. /**
  64. * Calculates the location on the toolbar to create the new sorter button based on the XY of the
  65. * drag event
  66. * @param {Ext.EventObject} e The event object
  67. * @return {Number} The index at which to insert the new button
  68. */
  69. calculateEntryIndex: function(e) {
  70. var entryIndex = 0,
  71. toolbar = this.toolbar,
  72. items = toolbar.items.items,
  73. count = items.length,
  74. xTotal = toolbar.getEl().getXY()[0],
  75. xHover = e.getXY()[0] - xTotal;
  76. for (var index = 0; index < count; index++) {
  77. var item = items[index],
  78. width = item.getEl().getWidth(),
  79. midpoint = xTotal + width / 2;
  80. xTotal += width;
  81. if (xHover < midpoint) {
  82. entryIndex = index;
  83. break;
  84. } else {
  85. entryIndex = index + 1;
  86. }
  87. }
  88. return entryIndex;
  89. },
  90. /**
  91. * Returns true if the drop is allowed on the drop target. This function can be overridden
  92. * and defaults to simply return true
  93. * @param {Object} data Arbitrary data from the drag source
  94. * @return {Boolean} True if the drop is allowed
  95. */
  96. canDrop: function(data) {
  97. return true;
  98. },
  99. /**
  100. * Custom notifyOver method which will be used in the plugin's internal DropTarget
  101. * @return {String} The CSS class to add
  102. */
  103. notifyOver: function(dragSource, event, data) {
  104. return this.canDrop.apply(this, arguments) ? this.dropTarget.dropAllowed : this.dropTarget.dropNotAllowed;
  105. },
  106. /**
  107. * Called when the drop has been made. Creates the new toolbar item, places it at the correct location
  108. * and calls the afterLayout callback.
  109. */
  110. notifyDrop: function(dragSource, event, data) {
  111. var canAdd = this.canDrop(dragSource, event, data),
  112. tbar = this.toolbar;
  113. if (canAdd) {
  114. var entryIndex = this.calculateEntryIndex(event);
  115. tbar.insert(entryIndex, this.createItem(data));
  116. tbar.doLayout();
  117. this.afterLayout();
  118. }
  119. return canAdd;
  120. },
  121. /**
  122. * Creates the new toolbar item based on drop data. This method must be implemented by the plugin instance
  123. * @param {Object} data Arbitrary data from the drop
  124. * @return {Mixed} An item that can be added to a toolbar
  125. */
  126. createItem: function(data) {
  127. //<debug>
  128. Ext.Error.raise("The createItem method must be implemented in the ToolbarDroppable plugin");
  129. //</debug>
  130. },
  131. /**
  132. * Called after a new button has been created and added to the toolbar. Add any required cleanup logic here
  133. */
  134. afterLayout: Ext.emptyFn
  135. });