Supporting Post Backs for Sencha Touch Forms and Buttons

Although I haven't tested everything nor do I support all scenarios, I have a base framework with server controls for each Sencha Touch JavaScript component element that renders to javaScript and got samples working for forms, docking panels, buttons and the carousel rendering properly.

Today I spent some time trying to get post backs working properly which actually was more challenging than I thought.

The main problem arose from the fact that Sencha Touch renders its own Form tags, and the form elements it rendered would only be contained within those form tags, such that performing a post back on the main ASP.Net form would not include any details about the elements of the sencha touch form.

My solution so far, which seems to be working, has been to hook into the change listener on each form input and copy the changed value to a hidden input the control renders in the ASP.Net form. This still will only work (properly) if you have one FormPanel on your page, but I suspect that should suffice for most applications.

One little gotcha I discovered, is that the Ext.form.Text component's value property isn't auto updated as you type. Instead you actually need to call the getValue() function to get the current value.

I also did some work on databinding, and although I haven't hooked anything up to a data bound control yet, I did managed to get DataSource controls to render as JavaScript that registers a model and creates a simple store. Once I have that working, I'll post some details.

Support Server Side Databinding with Sencha Touch and ASP.Net webforms

How to set your main view in Sencha Touch (Ext.Setup vs. Ext.Application)