For the last couple days I ran into JavaScript errors with toolbars for Ext JS. One of the issues is clearly documented here. I just added hideMode:'offsets' to the toolbar definition and the error went away. The other one, I had to add enableOverflow: false option to the toolbar to avoid hitting Object required error in IE.
Posts Tagged Ext JS
Workarounds for IE 8 and Ext JS
JavaScript trick
This might be useful trick to upload and display an image.
Configure tab sequencing on a modal window
mmusson’s code post in this thread works well for me.
createDelegate in ExtJS
createDelegate is an interesting way to pass a function object with a scope object. This is very useful for using callback functions. For more information, see this screencast.
Optional fields with XTemplate in Ext JS
This thread helped me to use Ext JS XTemplate with optional fields. The only thing I had to figure out was defining my own check exists function, this.exists().
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.
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.
Enabling use of “defaultValue” with JSON data source for Ext JS
I have a JSON response that has data in a nested object within a data entry. Mapping and reading the nested data is easy and straightforward. The interesting part is that the nested object is optional and therefore may not exist in the response sometimes. Unfortunately, JsonReader can’t handle this and would throw a silent exception that caused the whole UI initialization to halt. The API doc seem to suggest that the proper behavior is for the library to use pre-configured defaultValue when data doesn’t exist. Here is the original code from the readRecords function from JsonReader:
for(var j = 0; j < fl; j++){
f = fi[j];
var v = this.ef[j](n);
values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue, n);
}
Exception would occur at the point of calling this.ef[j](n) to access the data at field index j from the parameter n, which contains JSON fragment. This prevented the defaultValue ever being used in the next line.
What I did to work around this issue is to add a try-catch block around the line and set v to undefined in the catch clause. This allows the defaultValue to be used when data is missing.
Follow-up on TreePanel
In this post, I had the following questions:
- How do I set leaf node?
- How do I configure to change the initial “move” behavior of drag-and-drop into a “copy” action so the node in the source tree doesn’t disappear?
Here are my own answers:
To set leaf node, I just updated the sandbox function to return an array of node definition objects instead of simple text. For example, a leaf node definition can look like the following:
{"text":"myNode","id":"myNodeID","leaf":true,"cls":"file"}
To convert a “move” to a “copy” behavior, I had to listen on “beforeremove” event and call appendchild() function with a new Ext.tree.AsyncTreeNode object. The new node object contains data from the original node. This effectively undo remove operation. I added in an extra if statement for situations when I actually want to remove a node.
Beyond that, I also wanted to add the ability to not add duplicate nodes. So, I had to listen on “beforenodedrop” event and call findChild() function to find matching node based on text attribute. If the function returns a non-null object, then I called remove function. The code will continue add the node and the net result will be a single node, which is what I wanted.
Extending Ext JS
The technique used in the fix I referenced in one of my previous posts is very useful. I used the same override function to change the Ext JS library without editing the actual library itself. For example, I used this technique to override Ext.form.ComboBox.getParams() function to use a different parameter name for limit.
