Archive for February, 2009

Sort case insensitively

It’s interesting to find a minor difference on how Ext JS’ store handles case sorting. If you want to sort case sensitively, then remove the type property definition below, else add it in. Here is an example:

{name: 'field name', type:'string'},

Thanks to this thread for the trick.

Comments (1)

Be careful with the sandbox

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.

Leave a Comment