Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-5568 in a recent build.
  1. #1
    Sencha Premium Member karlsnyder0's Avatar
    Join Date
    Mar 2010
    Location
    Maryland, USA
    Posts
    82
    Vote Rating
    12
    karlsnyder0 is on a distinguished road

      0  

    Default [4.1 b3] ToolbarDroppable.calculateEntryIndex()

    [4.1 b3] ToolbarDroppable.calculateEntryIndex()


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

    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-

    Code:
                   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.
    Last edited by karlsnyder0; 9 Mar 2012 at 8:29 AM. Reason: adjust link to point to top of post

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,329
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    We will look into this.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1