examples/docs/source/ToolbarDroppable.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 <div id="cls-Ext.ux.ToolbarDroppable"></div>/**
  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  * new Ext.ux.ToolbarDroppable({
  23  *   createItem: function(data) {
  24  *     return new 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.ux.ToolbarDroppable = Ext.extend(Object, {
  33     <div id="method-Ext.ux.ToolbarDroppable-constructor"></div>/**
  34      * @constructor
  35      */
  36     constructor: function(config) {
  37       Ext.apply(this, config, {
  38
  39       });
  40     },
  41
  42     <div id="method-Ext.ux.ToolbarDroppable-init"></div>/**
  43      * Initializes the plugin and saves a reference to the toolbar
  44      * @param {Ext.Toolbar} toolbar The toolbar instance
  45      */
  46     init: function(toolbar) {
  47       <div id="prop-Ext.ux.ToolbarDroppable-toolbar"></div>/**
  48        * @property toolbar
  49        * @type Ext.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     <div id="method-Ext.ux.ToolbarDroppable-createDropTarget"></div>/**
  61      * Creates a drop target on the toolbar
  62      */
  63     createDropTarget: function() {
  64         <div id="prop-Ext.ux.ToolbarDroppable-dropTarget"></div>/**
  65          * @property dropTarget
  66          * @type Ext.dd.DropTarget
  67          * The drop target attached to the toolbar instance
  68          */
  69         this.dropTarget = new Ext.dd.DropTarget(this.toolbar.getEl(), {
  70             notifyOver: this.notifyOver.createDelegate(this),
  71             notifyDrop: this.notifyDrop.createDelegate(this)
  72         });
  73     },
  74
  75     <div id="method-Ext.ux.ToolbarDroppable-addDDGroup"></div>/**
  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     <div id="method-Ext.ux.ToolbarDroppable-calculateEntryIndex"></div>/**
  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     <div id="method-Ext.ux.ToolbarDroppable-canDrop"></div>/**
 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     <div id="method-Ext.ux.ToolbarDroppable-notifyOver"></div>/**
 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     <div id="method-Ext.ux.ToolbarDroppable-notifyDrop"></div>/**
 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     <div id="method-Ext.ux.ToolbarDroppable-createItem"></div>/**
 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         throw new Error("The createItem method must be implemented in the ToolbarDroppable plugin");
 161     },
 162
 163     <div id="prop-Ext.ux.ToolbarDroppable-afterLayout"></div>/**
 164      * Called after a new button has been created and added to the toolbar. Add any required cleanup logic here
 165      */
 166     afterLayout: Ext.emptyFn
 167 });</pre>
 168 </body>
 169 </html>