<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The source code</title> <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="../resources/prettify/prettify.js"></script> <style type="text/css"> .highlight { display: block; background-color: #ddd; } </style> <script type="text/javascript"> function highlight() { document.getElementById(location.hash.replace(/#/, "")).className = "highlight"; } </script> </head> <body onload="prettyPrint(); highlight();"> <pre class="prettyprint lang-js"><span id='Ext-ux-ToolbarDroppable'>/** </span> * @class Ext.ux.ToolbarDroppable * @extends Object * Plugin which allows items to be dropped onto a toolbar and be turned into new Toolbar items. * To use the plugin, you just need to provide a createItem implementation that takes the drop * data as an argument and returns an object that can be placed onto the toolbar. Example: * <pre> * Ext.create('Ext.ux.ToolbarDroppable', { * createItem: function(data) { * return Ext.create('Ext.Button', {text: data.text}); * } * }); * </pre> * The afterLayout function can also be overridden, and is called after a new item has been * created and inserted into the Toolbar. Use this for any logic that needs to be run after * the item has been created. */ Ext.define('Ext.ux.ToolbarDroppable', { extend: 'Object', <span id='Ext-ux-ToolbarDroppable-method-constructor'> /** </span> * @constructor */ constructor: function(config) { Ext.apply(this, config); }, <span id='Ext-ux-ToolbarDroppable-method-init'> /** </span> * Initializes the plugin and saves a reference to the toolbar * @param {Ext.toolbar.Toolbar} toolbar The toolbar instance */ init: function(toolbar) { <span id='Ext-ux-ToolbarDroppable-property-toolbar'> /** </span> * @property toolbar * @type Ext.toolbar.Toolbar * The toolbar instance that this plugin is tied to */ this.toolbar = toolbar; this.toolbar.on({ scope : this, render: this.createDropTarget }); }, <span id='Ext-ux-ToolbarDroppable-method-createDropTarget'> /** </span> * Creates a drop target on the toolbar */ createDropTarget: function() { <span id='Ext-ux-ToolbarDroppable-property-dropTarget'> /** </span> * @property dropTarget * @type Ext.dd.DropTarget * The drop target attached to the toolbar instance */ this.dropTarget = Ext.create('Ext.dd.DropTarget', this.toolbar.getEl(), { notifyOver: Ext.Function.bind(this.notifyOver, this), notifyDrop: Ext.Function.bind(this.notifyDrop, this) }); }, <span id='Ext-ux-ToolbarDroppable-method-addDDGroup'> /** </span> * Adds the given DD Group to the drop target * @param {String} ddGroup The DD Group */ addDDGroup: function(ddGroup) { this.dropTarget.addToGroup(ddGroup); }, <span id='Ext-ux-ToolbarDroppable-method-calculateEntryIndex'> /** </span> * Calculates the location on the toolbar to create the new sorter button based on the XY of the * drag event * @param {Ext.EventObject} e The event object * @return {Number} The index at which to insert the new button */ calculateEntryIndex: function(e) { var entryIndex = 0, toolbar = this.toolbar, items = toolbar.items.items, count = items.length, xHover = e.getXY()[0], index = 0, el, xTotal, width, midpoint; for (; index < count; index++) { el = items[index].getEl(); xTotal = el.getXY()[0]; width = el.getWidth(); midpoint = xTotal + width / 2; if (xHover < midpoint) { entryIndex = index; break; } else { entryIndex = index + 1; } } return entryIndex; }, <span id='Ext-ux-ToolbarDroppable-method-canDrop'> /** </span> * Returns true if the drop is allowed on the drop target. This function can be overridden * and defaults to simply return true * @param {Object} data Arbitrary data from the drag source * @return {Boolean} True if the drop is allowed */ canDrop: function(data) { return true; }, <span id='Ext-ux-ToolbarDroppable-method-notifyOver'> /** </span> * Custom notifyOver method which will be used in the plugin's internal DropTarget * @return {String} The CSS class to add */ notifyOver: function(dragSource, event, data) { return this.canDrop.apply(this, arguments) ? this.dropTarget.dropAllowed : this.dropTarget.dropNotAllowed; }, <span id='Ext-ux-ToolbarDroppable-method-notifyDrop'> /** </span> * Called when the drop has been made. Creates the new toolbar item, places it at the correct location * and calls the afterLayout callback. */ notifyDrop: function(dragSource, event, data) { var canAdd = this.canDrop(dragSource, event, data), tbar = this.toolbar; if (canAdd) { var entryIndex = this.calculateEntryIndex(event); tbar.insert(entryIndex, this.createItem(data)); tbar.doLayout(); this.afterLayout(); } return canAdd; }, <span id='Ext-ux-ToolbarDroppable-method-createItem'> /** </span> * Creates the new toolbar item based on drop data. This method must be implemented by the plugin instance * @param {Object} data Arbitrary data from the drop * @return {Mixed} An item that can be added to a toolbar */ createItem: function(data) { //<debug> Ext.Error.raise("The createItem method must be implemented in the ToolbarDroppable plugin"); //</debug> }, <span id='Ext-ux-ToolbarDroppable-method-afterLayout'> /** </span> * Called after a new button has been created and added to the toolbar. Add any required cleanup logic here */ afterLayout: Ext.emptyFn }); </pre> </body> </html>