/ext-4.1.0_b3/examples/ux/ToolbarDroppable.js
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 /**
22 * @constructor
23 */
24 constructor: function(config) {
25 Ext.apply(this, config);
26 },
27
28 /**
29 * Initializes the plugin and saves a reference to the toolbar
30 * @param {Ext.toolbar.Toolbar} toolbar The toolbar instance
31 */
32 init: function(toolbar) {
33 /**
34 * @property toolbar
35 * @type Ext.toolbar.Toolbar
36 * The toolbar instance that this plugin is tied to
37 */
38 this.toolbar = toolbar;
39
40 this.toolbar.on({
41 scope : this,
42 render: this.createDropTarget
43 });
44 },
45
46 /**
47 * Creates a drop target on the toolbar
48 */
49 createDropTarget: function() {
50 /**
51 * @property dropTarget
52 * @type Ext.dd.DropTarget
53 * The drop target attached to the toolbar instance
54 */
55 this.dropTarget = Ext.create('Ext.dd.DropTarget', this.toolbar.getEl(), {
56 notifyOver: Ext.Function.bind(this.notifyOver, this),
57 notifyDrop: Ext.Function.bind(this.notifyDrop, this)
58 });
59 },
60
61 /**
62 * Adds the given DD Group to the drop target
63 * @param {String} ddGroup The DD Group
64 */
65 addDDGroup: function(ddGroup) {
66 this.dropTarget.addToGroup(ddGroup);
67 },
68
69 /**
70 * Calculates the location on the toolbar to create the new sorter button based on the XY of the
71 * drag event
72 * @param {Ext.EventObject} e The event object
73 * @return {Number} The index at which to insert the new button
74 */
75 calculateEntryIndex: function(e) {
76 var entryIndex = 0,
77 toolbar = this.toolbar,
78 items = toolbar.items.items,
79 count = items.length,
80 xTotal = toolbar.getEl().getXY()[0],
81 xHover = e.getXY()[0] - xTotal;
82
83 for (var index = 0; index < count; index++) {
84 var item = items[index],
85 width = item.getEl().getWidth(),
86 midpoint = xTotal + width / 2;
87
88 xTotal += width;
89
90 if (xHover < midpoint) {
91 entryIndex = index;
92
93 break;
94 } else {
95 entryIndex = index + 1;
96 }
97 }
98
99 return entryIndex;
100 },
101
102 /**
103 * Returns true if the drop is allowed on the drop target. This function can be overridden
104 * and defaults to simply return true
105 * @param {Object} data Arbitrary data from the drag source
106 * @return {Boolean} True if the drop is allowed
107 */
108 canDrop: function(data) {
109 return true;
110 },
111
112 /**
113 * Custom notifyOver method which will be used in the plugin's internal DropTarget
114 * @return {String} The CSS class to add
115 */
116 notifyOver: function(dragSource, event, data) {
117 return this.canDrop.apply(this, arguments) ? this.dropTarget.dropAllowed : this.dropTarget.dropNotAllowed;
118 },
119
120 /**
121 * Called when the drop has been made. Creates the new toolbar item, places it at the correct location
122 * and calls the afterLayout callback.
123 */
124 notifyDrop: function(dragSource, event, data) {
125 var canAdd = this.canDrop(dragSource, event, data),
126 tbar = this.toolbar;
127
128 if (canAdd) {
129 var entryIndex = this.calculateEntryIndex(event);
130
131 tbar.insert(entryIndex, this.createItem(data));
132 tbar.doLayout();
133
134 this.afterLayout();
135 }
136
137 return canAdd;
138 },
139
140 /**
141 * Creates the new toolbar item based on drop data. This method must be implemented by the plugin instance
142 * @param {Object} data Arbitrary data from the drop
143 * @return {Mixed} An item that can be added to a toolbar
144 */
145 createItem: function(data) {
146 //<debug>
147 Ext.Error.raise("The createItem method must be implemented in the ToolbarDroppable plugin");
148 //</debug>
149 },
150
151 /**
152 * Called after a new button has been created and added to the toolbar. Add any required cleanup logic here
153 */
154 afterLayout: Ext.emptyFn
155});