ExtJs

I spent the better part of yesterday trying to Ajax upload a File using a Web Service and Ext.Net (formerly Coolite). Let me first explain the situation I was working in.

I had a Page that renders to the browser. This page then loads appropriate UserControls from the server depending upon user actions. One of these User Controls allowed the User to upload files to the server, together with some data about the file being uploaded. A naive (and easy) approach would have been to handle the file upload in a normal ASP.NET Postback, or Ext.Net DirectMethod or DirectEvent.

In the first of this series of couple of blog posts (available here), I have discussed the problem of maintaining reference to ExtJs components on the client-side in javascript, and the motivation for creating a new solution to it, than what ExtJs/Ext.Net provide out-of-the box. Well, here's how I have settled down on resolving the issue.

This is one issue that almost all developers of ExtJs/Ext.NET applications face, maintaining client-side references for the Javascript components. The seriousness of the managing the issue effectively manifests manifold, when working on large applications in modular fashion with multiple developers involved, and components being instantized or being loaded from the server on demand.

Well, I discovered this problem and its solution sometime earlier. However lately, a couple of my colleagues approached me for advice with the same issue, and I thought of writing a blog post for the same.

In a nut-shell, the problem is that ASP.NET transfers the data to the client in chunked encoding (Transfer-Encoding: chunked), if you prematurely flush the Response stream for the Http request and the Content-Length header for the Response is not explicitly set by you.

If you have been a regular reader of my blog entries, you would be knowing that I have been using ExtJs/Ext.net for a considerable time now. When I first encountered Coolite (through a Newsletter from Red-gate Software), I was pretty impressed, and it took me a while to understand all its nuts-and-bolts and its integration with ExtJs. And after I had some experience using these two frameworks, I believed I had in my arsenal the most comprehensive web frameworks for Ajax applications built.

DateField & TimeField from ExtJs/Ext.net arsenal are two really useful controls for entering date/time into forms. However, one of my clients complained that these fields can sometime take too much time in filling out, e.g. when the Date to be entered was months/years behind or ahead of the current date. Moreover, if you fill a partial value in these fields (e.g. 2 for timefield), the fields do not validate, and clear out the content.

Layer (Ext.Layer) is probably one of the lesser used element of the ExtJs framework. However, I recently discovered one great use of Layer, for showing dynamic helper controls for any element on the page.

As I am using more of Ext.Net/Coolite toolkits, I find myself delegating some of the UI creation from server-side markup to client-side javascript. This allows me to reuse the code better across different projects, plus enables me to introduce more dynamicity in the User Interface without needing to send unnecessary code generated from the server-side markup to the client.

I just spent a couple of hours (re)exploring the Ext.Net/ExtJs frameworks. I drilled down into new and updated examples at the Examples Explorers of both the frameworks, as well as had a good look at updations to the ExtJs docs.

People using ExtJs/Ext.Net/Coolite might be aware of the GroupingSummary plugin, for the GridPanel that allows you to group GridPanel rows on a particular field, and then display columns summaries for each set of grouped rows independently (see here and here for ExtJs & Ext.Net/Coolite examples respectively).