1. #1
    Sencha User arindam.hit's Avatar
    Join Date
    May 2012
    Location
    Hyderabad
    Posts
    99
    Answers
    1
    Vote Rating
    1
    arindam.hit is on a distinguished road

      0  

    Default Unanswered: How to change the views for different screen resolution??

    Unanswered: How to change the views for different screen resolution??


    Hi,

    I am developing one application using sencha touch 2. In the app, i am using some images as button and some default buttons also. Even some other components are also there. The problem is, when i am testing it for different android devices, the UI is not coming properly. Suppose when i am testing for Samsung S2, it is fitting in the screen. But while testing for 480 * 360 screens, it is going out of the screens. How can i handle the different screen sizes for android?? Is there any sample code??

    Please help..

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You shouldn't use fixed heights but use flex heights and layouts. If you have padding : 10px try with padding : 5em; or whatever works, em is a flex height depending on line-height and resolution, it's not fixed like px. You can also use percents. Also hbox/vbox layouts, card, fit all will work without fixed heights.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Touch Premium Member
    Join Date
    Jun 2011
    Location
    Perth, Western Australia
    Posts
    73
    Vote Rating
    0
    fairport is on a distinguished road

      0  

    Default Android screen resolution - a solution for allowing users to set for themselves

    Android screen resolution - a solution for allowing users to set for themselves


    Using numeric spinner field to allow users to choose their own resolution
    I gave them a range of 100% - 280% (needed 280% for new Sony hi-res screeens)

    This is Sencha Touch 1.1.1 code but it should give you the idea
    Code:
    minValue: 100,
    maxValue: 280,
    incrementValue: 5,
    listeners: { 
       spin: function(obj, value) {
          var res = String(value)+'%';
          Ext.getBody().dom.style.fontSize = res;
          ... save value to local storage ...
       },
       change: function(obj, value) {
         var res = String(value)+'%';
         Ext.getBody().dom.style.fontSize = res;
         ... save value to local storage ...
      }
    }
    etc.

    You will see the screen resolution change dynamically

    then

    Using local storage to save the resolution.
    On app start up, grab the value (e.g. resValue) from localStorage and set screen resolution like this
    Code:
    Ext.getBody().dom.style.fontSize = String(resValue)+'%';
    (you need to have various default values initially so the screens look reasonable)
    like Ext.is.iOS && Ext.is.Phone resValue = 114
    Ext.isAndroid resValue = 180

  4. #4
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Vote Rating
    0
    Gizmo_x is on a distinguished road

      0