3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * @class Ext.ux.ToolbarDroppable
10 * Plugin which allows items to be dropped onto a toolbar and be turned into new Toolbar items.
11 * To use the plugin, you just need to provide a createItem implementation that takes the drop
12 * data as an argument and returns an object that can be placed onto the toolbar. Example:
14 * new Ext.ux.ToolbarDroppable({
15 * createItem: function(data) {
16 * return new Ext.Button({text: data.text});
20 * The afterLayout function can also be overridden, and is called after a new item has been
21 * created and inserted into the Toolbar. Use this for any logic that needs to be run after
22 * the item has been created.
24 Ext.ux.ToolbarDroppable = Ext.extend(Object, {
28 constructor: function(config) {
29 Ext.apply(this, config, {
35 * Initializes the plugin and saves a reference to the toolbar
36 * @param {Ext.Toolbar} toolbar The toolbar instance
38 init: function(toolbar) {
42 * The toolbar instance that this plugin is tied to
44 this.toolbar = toolbar;
48 render: this.createDropTarget
53 * Creates a drop target on the toolbar
55 createDropTarget: function() {
57 * @property dropTarget
58 * @type Ext.dd.DropTarget
59 * The drop target attached to the toolbar instance
61 this.dropTarget = new Ext.dd.DropTarget(this.toolbar.getEl(), {
62 notifyOver: this.notifyOver.createDelegate(this),
63 notifyDrop: this.notifyDrop.createDelegate(this)
68 * Adds the given DD Group to the drop target
69 * @param {String} ddGroup The DD Group
71 addDDGroup: function(ddGroup) {
72 this.dropTarget.addToGroup(ddGroup);
76 * Calculates the location on the toolbar to create the new sorter button based on the XY of the
78 * @param {Ext.EventObject} e The event object
79 * @return {Number} The index at which to insert the new button
81 calculateEntryIndex: function(e) {
83 toolbar = this.toolbar,
84 items = toolbar.items.items,
86 xTotal = toolbar.getEl().getXY()[0],
87 xHover = e.getXY()[0] - xTotal;
89 for (var index = 0; index < count; index++) {
90 var item = items[index],
91 width = item.getEl().getWidth(),
92 midpoint = xTotal + width / 2;
96 if (xHover < midpoint) {
101 entryIndex = index + 1;
109 * Returns true if the drop is allowed on the drop target. This function can be overridden
110 * and defaults to simply return true
111 * @param {Object} data Arbitrary data from the drag source
112 * @return {Boolean} True if the drop is allowed
114 canDrop: function(data) {
119 * Custom notifyOver method which will be used in the plugin's internal DropTarget
120 * @return {String} The CSS class to add
122 notifyOver: function(dragSource, event, data) {
123 return this.canDrop.apply(this, arguments) ? this.dropTarget.dropAllowed : this.dropTarget.dropNotAllowed;
127 * Called when the drop has been made. Creates the new toolbar item, places it at the correct location
128 * and calls the afterLayout callback.
130 notifyDrop: function(dragSource, event, data) {
131 var canAdd = this.canDrop(dragSource, event, data),
135 var entryIndex = this.calculateEntryIndex(event);
137 tbar.insert(entryIndex, this.createItem(data));
147 * Creates the new toolbar item based on drop data. This method must be implemented by the plugin instance
148 * @param {Object} data Arbitrary data from the drop
149 * @return {Mixed} An item that can be added to a toolbar
151 createItem: function(data) {
152 throw new Error("The createItem method must be implemented in the ToolbarDroppable plugin");
156 * Called after a new button has been created and added to the toolbar. Add any required cleanup logic here
158 afterLayout: Ext.emptyFn