[4.1 b3] ToolbarDroppable.calculateEntryIndex()

[karlsnyder0]

As jdemoor suggests there is a bug in calculateEntryIndex(). In Ext4 there's a bit more to this bug. Consider the original code-

    /**
     * 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;
    },

We see that xHover is compared with midpoint to determine were the cursor is when dropping the toolbar item. The problem is that midpoint is calculated from the viewport edge and xHover is calculated from the Toolbar edge. This code will only work when the toolbar edge and the viewport edge share the same coordinates.

Additionally, xTotal is calculated for each item in the toolbar where xTotal is incremented by each item's width completely ignoring the fact that there is space between each item.

To work around this problem I overrode the calculateEntryIndex method with-

               calculateEntryIndex: function(e) {
                     var entryIndex = 0,
                          toolbar   = this.toolbar,
                          items       = toolbar.items.items,
                          count       = items.length,
                          xHover    = e.getXY()[0];
 
                     for (var index = 0; index < count; index++) {
                          var item  = items[index],
                               xTotal = item.getEl().getXY()[0]
                               width     = item.getEl().getWidth(),
                               midpoint = xTotal + width / 2;
 
                          if (xHover < midpoint) {
                               entryIndex = index;
 
                               break;
                          } else {
                               entryIndex = index + 1;
                          }
                     }
 
                     return entryIndex;
               },

To see this problem firsthand create a centered window with a toolbar and drop several items onto the toolbar. Try dropping items so they appear before or after existing items in the toolbar.

[mitchellsimoens]

We will look into this.