Positioning components in Sencha Touch / Ext JS?

Question

Seems like the answer to how to position components in Sencha Touch / Ext JS, especially with percentage or proportionally is pretty much to use some type of container with a layout type.

This seems like a step backwards to me - similar to what HTML Tables were for web page layouts. Create a containing structure that controls the layout and in each "cell" you have some content.

Specifically, if you have a component that you don't want SIZED based on these rules, only positioned - that is essentially what all the Sencha Touch / Ext JS approaches seem to be.

Layout type hbox, vbox, columns, flex layout, anchor. They all create containers around your components, instead of just directly positioning your components.

Am I missing something integral, or is this really the way it is?

Besides from the obvious problem of over-nesting, it seems like a more complicated approach, and creates a dependency between each component and the other components on the page.

I would like to have a way to say "this component is 30% from the top and 20% from the side", potentially also sizing the components using percentage - but not always.

The percentage / proportion approach is a must if you're developing for multiple devices.

Answer 1

If you are just getting started with Sencha Touch, it is easy to get caught up in the huge amounts of markup it creates. The key to developing in Sencha Touch is to let it do its thing and allow yourself to do things the 'Sencha Touch Way'.

Also, feel free to add classes to the components you are creating. You can manipulate these with CSS almost like a normal website.

Go through the docs. The frameworks have been around for a while, so, your issues with it have probably already been addressed.