+++ /dev/null
-<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>
-</head>
-<body onload="prettyPrint();">
- <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-<div id="cls-Ext.ux.ToolbarDroppable"></div>/**
- * @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>
- * new Ext.ux.ToolbarDroppable({
- * createItem: function(data) {
- * return new 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.ux.ToolbarDroppable = Ext.extend(Object, {
- <div id="method-Ext.ux.ToolbarDroppable-constructor"></div>/**
- * @constructor
- */
- constructor: function(config) {
- Ext.apply(this, config, {
-
- });
- },
-
- <div id="method-Ext.ux.ToolbarDroppable-init"></div>/**
- * Initializes the plugin and saves a reference to the toolbar
- * @param {Ext.Toolbar} toolbar The toolbar instance
- */
- init: function(toolbar) {
- <div id="prop-Ext.ux.ToolbarDroppable-toolbar"></div>/**
- * @property toolbar
- * @type Ext.Toolbar
- * The toolbar instance that this plugin is tied to
- */
- this.toolbar = toolbar;
-
- this.toolbar.on({
- scope : this,
- render: this.createDropTarget
- });
- },
-
- <div id="method-Ext.ux.ToolbarDroppable-createDropTarget"></div>/**
- * Creates a drop target on the toolbar
- */
- createDropTarget: function() {
- <div id="prop-Ext.ux.ToolbarDroppable-dropTarget"></div>/**
- * @property dropTarget
- * @type Ext.dd.DropTarget
- * The drop target attached to the toolbar instance
- */
- this.dropTarget = new Ext.dd.DropTarget(this.toolbar.getEl(), {
- notifyOver: this.notifyOver.createDelegate(this),
- notifyDrop: this.notifyDrop.createDelegate(this)
- });
- },
-
- <div id="method-Ext.ux.ToolbarDroppable-addDDGroup"></div>/**
- * Adds the given DD Group to the drop target
- * @param {String} ddGroup The DD Group
- */
- addDDGroup: function(ddGroup) {
- this.dropTarget.addToGroup(ddGroup);
- },
-
- <div id="method-Ext.ux.ToolbarDroppable-calculateEntryIndex"></div>/**
- * 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,
- xTotal = toolbar.getEl().getXY()[0],
- xHover = e.getXY()[0] - xTotal;
-
- for (var index = 0; index < count; index++) {
- var item = items[index],
- width = item.getEl().getWidth(),
- midpoint = xTotal + width / 2;
-
- xTotal += width;
-
- if (xHover < midpoint) {
- entryIndex = index;
-
- break;
- } else {
- entryIndex = index + 1;
- }
- }
-
- return entryIndex;
- },
-
- <div id="method-Ext.ux.ToolbarDroppable-canDrop"></div>/**
- * 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;
- },
-
- <div id="method-Ext.ux.ToolbarDroppable-notifyOver"></div>/**
- * 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;
- },
-
- <div id="method-Ext.ux.ToolbarDroppable-notifyDrop"></div>/**
- * 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;
- },
-
- <div id="method-Ext.ux.ToolbarDroppable-createItem"></div>/**
- * 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) {
- throw new Error("The createItem method must be implemented in the ToolbarDroppable plugin");
- },
-
- <div id="prop-Ext.ux.ToolbarDroppable-afterLayout"></div>/**
- * 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>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff