So I have working code to support binding server data to Sencha Touch components like lists and select widgets using the same data binding approach you typically use with other ASP.Net controls.
I created a "store" server control that will handle registering a data model and creating a store and filling it with data from the data source. Since it inherits from CompositeDataBounControl, you can set the DataSource property or specify the DataSourceID of any ASP.Net data source control. Finally you need only set your widgets store property to the same ID that the store uses to have that component work off of that store.
Here is the ASPX markup for a simple object data source, store and List control (similar to the List sencha touch sample):
<asp:ObjectDataSource runat="server" SelectMethod="GetContacts" TypeName="Contact"></asp:ObjectDataSource>
<SD:Store runat="server" DataSourceID="ObjectDataSource1" >
<sorters>
<SU:Sorter property="FirstName" />
</sorters>
<getGroupString>
function(record) {
return record.get('lastName')[0];
}
</getGroupString>
</SD:Store>
<ST:List fullscreen="true" runat="server" grouped="true" indexBar="false" store="contactsStore">
<div class="contact2"><strong>{firstName}</strong> {lastName}</div>
</ST:List>
Couple things to note, the GetContacts method is a simple method that dummy's up some names in a list. I've also tested with a SqlDataSource with parameters which also works fine. Right now the component will render every property of the data item, though I can imagine adding properties to allow folks to control which columns will be rendered.
I also have been playing with PersistanceMode and the ParseChildren property to improve the readability. The store supports this for Sorters and Filters and the GetGroupString property, which allows you to easily specify a custom javaScript function to get the groups. The list component itself maps the inner content to the itemTpl property which allows you to easily setup a tpl template using the standard Sencha Touch {fieldName} syntax.
This markup will output the following javaScript into the head of the page:
Ext.regModel('contactsStore_Model', {
fields: ['firstName','lastName']
});
var contactsStore = new Ext.data.Store({
model: 'contactsStore_Model'
, data: [ {firstName:'Captain',lastName:'America'},
{firstName:'Tony',lastName:'Stark'},
{firstName:'Super',lastName:'Man'},
{firstName:'Wonder',lastName:'Woman'},
{firstName:'Peter',lastName:'Parker'} ]
,storeId : 'contactsStore',
getGroupString : function(record) {
return record.get('lastName')[0];
}
});
var listMain = new Ext.List({
fullscreen : true,
grouped : true,
indexBar : false,
itemTpl : '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
store : 'contactsStore'
});
new Ext.Application({
launch: function() {
listMain.show();
}
});
I know the javaScript code rendered isn't the prettiest thing in the world, but it is functional. Even if you hate it, this approach could be used for simple scenarios or for rapid prototyping, after which you can take the rendered javaScript and manually clean and move.
I also have this working for the select form control. I eventually want to give some more thought on how to modify the control to better support other store scenarios binding to data sets external to the javaScript code (localStorage, REST, etc).
So far I have working samples that match the Carousel, Forms, Overlays, Tabs and Tabs2 samples.
Want to work on getting some of the Media controls and map control working and will update. I'm getting close to the point where I need to figure out what to call this library (nTouch?) and where to put it (codeplex, github, etc)