Basically, I want to combine a HTML5/CSS3 webpage with the Sencha Touch framework (to make use of it’s awesome model/store/AJAX functionality).
What would be the best way of doing this? At the moment I’m thinking of creating a top level container in Sencha and plugging the HTML for the page in as a template. However I’m going to need a few DataView objects and I’m not sure how I’d position them in the page unless the whole design was done using Sencha objects.
Well you’ve got it pretty much figured out already, you just need to get your feet wet now. ST will let you embed any existing HTML or CSS in pretty much any component. That will let you start to leverage ST’s non-visual tools like stores and models.
The minute you want to start including other ST visual components though, you can get stuck. ST components are intrinsically tied to it’s layout system. That means if you want to drop in lists or other data views, their size, alignment etc is all tied to their parents’ layout and other attributes. If they’re just dropped in freeform HTML they probably won’t look right.
My advice is that you bite the bullet and re-do the whole site in ST. Remember that you can still re-use a lot of your existing HTML fragments within ST panels and containers of your new mobile site. But the important thing is that ST now forms the ‘shell’ of your mobile site, and that ensures that any ST components you use will be correctly formatted.