Best practices for supporting Tablet and Phone layouts simultaneously

[senchauser2010]

I would like to know how people handle the differences in Tablet and Phone layouts for the same app. We are starting to develop an app which pretty much uses the same components on both phone and tablet, but they are laid out differently. For example, on phone, clicking on a list item slides to the details view of that item, but on tablet both list and the detail views are shown side-by-side and clicking on an item simply updates the detail view.

So in this example, apart from layout differences, it also means that event handling needs to be done differently though at the same time a lot of things like models, stores, the individual components themselves are completely reusable.

My question is what's the best practices around handling such situations without having to rewrite the layout and event handling logic completely? Or even if some (most?) of this needs to be re-written, what's the recommended practices around organizing these two sets of code to not make it look like "if (tablet) {...} else {...}" in the every other line of the code?

Thanks for opinions/suggestions!

[mrsunshine]

Maybe the Ext.ux.UniversalUI in the index.js of the kitchensink demo give you an idea how to organise a app that handels phone and tablet views. You will see that they often have condition like

Ext.is.Phone ? 'do this' : 'else tablet stuff',

[gkainth]

I've got the same problem. Still playing around with this.
So far, given the new MVC structure, i'm leaning towards :-

1) create several profiles to cover the scenarios required (phone portrait/landscape, tablet portrait/landscape)
2) create your components - let initComponent/constructor create all the pieces but don't add to parent container yet.
3) Override the setProfile function of the component to handle how everything is put together and what listeners are attached.

Hopefully this method should be able to cope with most scenarios including orientation changes.

The kiva and twitter examples are written in the new MVC framework.

Cheers
Gush

[senchauser2010]

I too am using MVC framework and creating the components outside layout code, though haven't looked much into profiles. It seems it was probably designed to address such needs. Will take a closer look.

There have been several requests to Ext team to publish a tutorial/blog on MVC architecture, but haven't seen any. Until then looking into examples is the only option (which are not consistent in many cases unfortunately).

Thanks for suggestions.