ExtJS dateFormat Milliseconds

I am creating a page where I am using java.sql.Timestamp to keep track of when a record is updated. When displaying this on a grid, I was finding that the dateformat was failing when trying to display this data in a grid. I was passing the values to the page using JSON, and the date looked like this:

2012-03-14 17:22:31.809

I was unable to find how to format this particular date, since nearly all documentation of dates gives an example of a time without milliseconds. The API documentation states:

 u     Decimal fraction of a second                                              

Examples:
(minimum 1 digit, arbitrary number of digits allowed)         001 (i.e. 0.001s) or
100 (i.e. 0.100s) or
99 (i.e. 0.999s) or
999876543210 (i.e. 0.999876543210s)
 

Nope, this didn't work.

After searching around and trying nearly every letter in the alphabet, it turns out that you need to use ms for milliseconds. Your Date format should look like this:

Y-m-d H:i:s.ms

Hope this helps someone else!!

Proper Indentation on a Tree In ExtJS

I'm using ExtJS's tree functionality to display navigation on a website (and then skinning over it so that it doesn't look like a bunch of folders).  However, a major problem that I was having was that ExtJS absolutely does not allow multiple lines in its tree implementation.  You can update the stylesheet to allow for wrapping with the following entry in your CSS:

.x-tree-node-anchor {
	white-space: normal;	
}

However, this will cause your multiple lines to wrap without the proper indentation.  I struggled with this for many hours before finding an excellent extension that wraps properly.  You can find it here:

IndentedTreeNodeUI

Mad props to JJulian for putting this together!  Hopefully, my links to his page will make this UI easier to find.

Extjs: JsonStore will not load

I spent a lot of time trying to figure out why my JsonStore wouldn't load into my EditorGrid. No errors were being thrown in Firebug, unless I used loadexception() on the store, in which case the exception really wasn't much help.

Finally, I figured out the problem. Can you spot it?

var js = new Ext.data.JsonStore({  url: 'myurl.jsp',
 sortInfo: {field: 'name', direction: 'ASC'},
 baseParams: { elementid: '1' },
 reader: new Ext.data.JsonReader({
 root: 'elements',
 id: 'id'
 }, [
  {name: 'id'},
  {name: 'name'}
  ])
 });
js.load();

If not, maybe you are having the same problem I was.

Apparently, when you create a JsonStore, it creates its own JsonReader. So, if you specify a JsonReader, it will ignore yours and use the one it created. By changing the store to Ext.data.Store, it fixed the issue.

A simple fix!

Extjs: XML Tag Name Mismatch

I'm using FileUploadField.js in Extjs. It was working, but then I changed the URL to which I was submitting the form, and then started getting the following error:

XML tag name mismatch (expected br)

This was curious, and I couldn't figure out what the issue was. I googled and found very little help on the subject.

The solution? The problem was in my back-end server code. There was a null pointer exception in my Java code, which returned an HTML error page that is standard for our app. The Extjs processing was expecting JSON, and couldn't find it, obviously. Hence, the error.

If you are using Firebug (which you should be, everyone should be), you will be able to trace the error better by looking at the "Net" tab when you access your Extjs component that is throwing the error. After that, it was an easy fix.