adjusting layout as per screen size

[manoveg]

Hi,

I am new to sencha touch. I am working on a web app and when I view in a bigger size android phone items in the layout appear fine but when I view it in iPhone layout is not adjusted as per phone size and items go out of the screen .
please suggest how to handle this.

[mitchellsimoens]

In initComponent, set the layout property based on your criteria.

[manoveg]

Hi,

Sorry but I did not understood what I should do. I tried

profiles: {
      phoneBlackberry: function() {
      return Ext.is.Blackberry;
      },
      phoneAndroid: function() {
      return Ext.is.Android;
      },
      phoneApple: function() {
      return Ext.is.iOS;
      },
      desktop: function() {
      return Ext.is.Desktop;
      },
      tabletPortrait: function() {
      return Ext.is.Tablet && Ext.orientation == 'portrait';
      },
      tabletLandscape: function() {
      return Ext.is.Tablet && Ext.orientation == 'landscape';
      }
      }

but this had no difference. Please advice what should be my criteria . Is it the screen size but then there are so many devices around with different sizes and accordingly what layout property should I set.
I was expecting with

layout: {
            type: 'vbox',
            align: 'center',
            pack: 'top',
            autoScroll: true,
             },

I should get layout centered irrespective of screen size.
How to handle this. Please advice.