ExtJs 4 – Running docs over IIS in Windows

I have already been using ExtJs 4.0-Beta3 for the last couple of weeks. And an hour earlier, I occasionally went to the Sencha site to check one of my posts on the forums. And the surprise was waiting there. ExtJs 4 had been launched today.

I immediately downloaded the release version for ExtJs 4 and updated the latest build to one of my projects where I was using ExtJs 4 Beta 3. Separately, I configured the accompanying docs to run over IIS 7 on my Windows 7 machine.

And an issue immediately struck me, the main content area of the docs was rendering fine, but the tree on the left was missing (see the screenshot to the right). This did not happen for ExtJs 4.0 – Beta 3 docs.

Surprised, I checked the Developer Tools in Chrome to notice that the following 2 scripts were giving 404 (Not Found) errors:

1. http://localhost/e4/docs/class_search.json?docsCallback=Ext.data.JsonP.callback
2. http://localhost/e4/docs/classes.json?_dc=1303849217703&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback2

But when I checked the file-system, both the scripts were present there. A quick check through IIS revealed that IIS refused to server these scripts with the following error:

HTTP Error 404.3 - Not Found

The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.

And the issue was already there to be seen. No Mime type had been configured in IIS for the .json file extension and hence IIS simply refused to serve that file.

The fix was easy, add the Mime Type “text/javascript” (or any other acceptable javascript Mime Type) for the .json file extension in IIS. Here’s how you would do it in IIS 7:

1. Go To Control Panel > Administrative Tools > Internet Information Services (IIS) Manager
2. You would see the Icon for “MIME Types” in the main content region, double-click it.
3. In the right bar, click “Add”.
4. Enter “.json” for File Name extension and “text/javascript” for MIME Type in the dialog box and click OK.
5. Return to ExtJs docs and refresh the page, the tree would be there now.

Instructions for IIS 6 or previous versions would be almost similar, you would just need to find the MIME Types configuration section in IIS Manager and add the MIME type for .json extension.