This customization of Ext JS TreeLoader can create a negative side-effect on Safari and Chrome in a very narrow use case. The issue that I ran into happens when the folder node was empty and when you drop a leaf node into it. In the sandBox function shown in the above link, it would return one level of children for the given clicked parent node. This is a nice way to build a scalable tree that can be very deep. When combining this with drag-and-drop, it can result in two new nodes for a given dropped leaf node. This was caused by the interaction with the listener for beforenodedrop event, which updates a store with the new association to the target node. This caused the look-up code in sandBox function to retrieve the newly associated leaf node and caused the UI to display one extra dropped node. The other node comes from the drag-and-drop action. To resolve this, I had to crate the whole tree on the initial tree load instead of creating each level on-demand.
While debugging this issue, I learned that Safari and Chrome actually behaves differently. Safari would consistently add two nodes while Chrome would only add two nodes with a particular work-flow sequence. i.e. create one folder node, then drag-and-drop a leaf node, create another folder node, and drag-and-drop a second leaf node works fine. It starts to create two nodes when creating two folders in a row and then drag-and-drop leaf nodes. Before this, I thought the two browsers are essentially the same. After experienced this, I had a totally different view about them.
