Wednesday, October 10, 2012

Downloadify Stopped Working in Google Chrome

Downloadify uses Flash's download functionality to enable client side download. It saves server side roundtrip.  There is also nice user extensions using Downloadify to export ExtJS grid on the client side. HTML 5 does have some limited support of client side download, but it suffers inconsistent support between browsers.

Ok, after all the justification for using it, Downloadify stopped working for Google Chrome recently. And here are the observations:
  • Environment: Windows, Google Chrome is up-to-date
  • Download still works in IE and Firefox;
  • Download only works in Chrome if I'm testing using Intranet URL. But it does not work if the URL looks like Internet address (i.e. http://localhost works, but http://10.10.10.1 won't work);
  • IE, Firefox are on Flash 11.3, and Chrome is running Flash 11.4
Solution:
Not really a solution. It's more like a workaround.
  1. In Chrome address bar type: "about:plugins"
  2. Click on "Details" button to expand into more detailed view
  3. Find "Flash" section, and disable the Flash player 11.4 (something called "PepperFlash"\"pepflashplayer.dll")
  4. Make sure there is another Flash player listed here, which should be Adobe's distribution

Root Cause?
I can only guess. Still not sure why and how to fix it properly.
Turns out Google Chrome has it's own Flash distribution. (Only guessing) It seems to be different from Adobe's official one, and somehow has higher default security settings.

itemId and id in ExtJS

The story: 
Here is a lesson for not reading document thoroughly. My very first ExtJS project goes smoothly until one day I created multiple tabs, and then closed some of them. All of sudden the layout completely messed up. In the debug console, there is null reference error. Call stack is deep in the ExtJS library.

Fast forward, after several hours of digging around, I found out I was using "id" config for several ExtJS controls. Then, close tab action will cause all the controls on the other tabs with the same "id" got deleted from DOM.

Solution:
Use "itemId" instead of "id" config for controls.

Comparison to ASP.NET
Came from ASP.NET world, I guess that is why I was using "id" config without any second thought. Below is a comparison of similar concepts in ASP.NET

ExtJS ASP.NET _
itemId  ID  (Recommended) HTML element's ID is automatically generated to ensure uniqueness, usually by concatenating ID of the container hierarchy. Programmer only need to ensure ID is unique within it's container.
id  ClientID  (Not recommended) Rendered HTML element will use this property as their ID. It's programmer's responsibility to ensure it is unique across the whole page (think when you starting to have multiple instances of the same control on a page).

(To check out more ExtJS related posts from me, click here: http://developertips.blogspot.com/search/label/ExtJS)