examples/ux/ToolbarDroppable.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.ux.ToolbarDroppable
  17  * @extends Object
  18  * Plugin which allows items to be dropped onto a toolbar and be turned into new Toolbar items.
  19  * To use the plugin, you just need to provide a createItem implementation that takes the drop
  20  * data as an argument and returns an object that can be placed onto the toolbar. Example:
  21  * <pre>
  22  * Ext.create('Ext.ux.ToolbarDroppable', {
  23  *   createItem: function(data) {
  24  *     return Ext.create('Ext.Button', {text: data.text});
  25  *   }
  26  * });
  27  * </pre>
  28  * The afterLayout function can also be overridden, and is called after a new item has been
  29  * created and inserted into the Toolbar. Use this for any logic that needs to be run after
  30  * the item has been created.
  31  */
  32  Ext.define('Ext.ux.ToolbarDroppable', {
  33     extend: 'Object',
  34
  35     /**
  36      * @constructor
  37      */
  38     constructor: function(config) {
  39       Ext.apply(this, config);
  40     },
  41
  42     /**
  43      * Initializes the plugin and saves a reference to the toolbar
  44      * @param {Ext.toolbar.Toolbar} toolbar The toolbar instance
  45      */
  46     init: function(toolbar) {
  47       /**
  48        * @property toolbar
  49        * @type Ext.toolbar.Toolbar
  50        * The toolbar instance that this plugin is tied to
  51        */
  52       this.toolbar = toolbar;
  53
  54       this.toolbar.on({
  55           scope : this,
  56           render: this.createDropTarget
  57       });
  58     },
  59
  60     /**
  61      * Creates a drop target on the toolbar
  62      */
  63     createDropTarget: function() {
  64         /**
  65          * @property dropTarget
  66          * @type Ext.dd.DropTarget
  67          * The drop target attached to the toolbar instance
  68          */
  69         this.dropTarget = Ext.create('Ext.dd.DropTarget', this.toolbar.getEl(), {
  70             notifyOver: Ext.Function.bind(this.notifyOver, this),
  71             notifyDrop: Ext.Function.bind(this.notifyDrop, this)
  72         });
  73     },
  74
  75     /**
  76      * Adds the given DD Group to the drop target
  77      * @param {String} ddGroup The DD Group
  78      */
  79     addDDGroup: function(ddGroup) {
  80         this.dropTarget.addToGroup(ddGroup);
  81     },
  82
  83     /**
  84      * Calculates the location on the toolbar to create the new sorter button based on the XY of the
  85      * drag event
  86      * @param {Ext.EventObject} e The event object
  87      * @return {Number} The index at which to insert the new button
  88      */
  89     calculateEntryIndex: function(e) {
  90         var entryIndex = 0,
  91             toolbar    = this.toolbar,
  92             items      = toolbar.items.items,
  93             count      = items.length,
  94             xTotal     = toolbar.getEl().getXY()[0],
  95             xHover     = e.getXY()[0] - xTotal;
  96
  97         for (var index = 0; index < count; index++) {
  98             var item     = items[index],
  99                 width    = item.getEl().getWidth(),
 100                 midpoint = xTotal + width / 2;
 101
 102             xTotal += width;
 103
 104             if (xHover < midpoint) {
 105                 entryIndex = index;
 106
 107                 break;
 108             } else {
 109                 entryIndex = index + 1;
 110             }
 111         }
 112
 113         return entryIndex;
 114     },
 115
 116     /**
 117      * Returns true if the drop is allowed on the drop target. This function can be overridden
 118      * and defaults to simply return true
 119      * @param {Object} data Arbitrary data from the drag source
 120      * @return {Boolean} True if the drop is allowed
 121      */
 122     canDrop: function(data) {
 123         return true;
 124     },
 125
 126     /**
 127      * Custom notifyOver method which will be used in the plugin's internal DropTarget
 128      * @return {String} The CSS class to add
 129      */
 130     notifyOver: function(dragSource, event, data) {
 131         return this.canDrop.apply(this, arguments) ? this.dropTarget.dropAllowed : this.dropTarget.dropNotAllowed;
 132     },
 133
 134     /**
 135      * Called when the drop has been made. Creates the new toolbar item, places it at the correct location
 136      * and calls the afterLayout callback.
 137      */
 138     notifyDrop: function(dragSource, event, data) {
 139         var canAdd = this.canDrop(dragSource, event, data),
 140             tbar   = this.toolbar;
 141
 142         if (canAdd) {
 143             var entryIndex = this.calculateEntryIndex(event);
 144
 145             tbar.insert(entryIndex, this.createItem(data));
 146             tbar.doLayout();
 147
 148             this.afterLayout();
 149         }
 150
 151         return canAdd;
 152     },
 153
 154     /**
 155      * Creates the new toolbar item based on drop data. This method must be implemented by the plugin instance
 156      * @param {Object} data Arbitrary data from the drop
 157      * @return {Mixed} An item that can be added to a toolbar
 158      */
 159     createItem: function(data) {
 160         //<debug>
 161         Ext.Error.raise("The createItem method must be implemented in the ToolbarDroppable plugin");
 162         //</debug>
 163     },
 164
 165     /**
 166      * Called after a new button has been created and added to the toolbar. Add any required cleanup logic here
 167      */
 168     afterLayout: Ext.emptyFn
 169 });
 170