<!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> * 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', {
|
|
<span id='Ext-ux-ToolbarDroppable-method-constructor'> /**
|
</span> * Creates new ToolbarDroppable.
|
* @param {Object} config Config options.
|
*/
|
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>
|