1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    9
    Vote Rating
    1
    nmadrane is on a distinguished road

      0  

    Default Answered: How would you code the following design ?

    Hi,

    Please have a look at https://itunes.apple.com/us/app/koutoubia/id560563570?l=fr&ls=1&mt=8

    I
    am interested by the bottom bar : it doesn't have the same height for all buttons, the selected button has a nice rounded hat. In the fourth screenshot, the rounded hat is ABOVE the main panel (zindex).

    How would you that that with sencha ? A classic vbox won't do it. I believe that it is simply a matter of partially overlapping the toolbar and the main panel (so that the rounded hat is drawn on top of the main panel content).

    I had a look at the relative/absolute positioning options for a sencha panel but I don't see how to use it for that specific example.

    Regards,

    Nabil.

  2. No, I'm saying let the toolbar have say 65px but have the background have 50px and then the button let it have a background that goes 65px.

  3. #2
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,232
    Vote Rating
    1057
    Answers
    3647
    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

    First thing I would try is to give the background a height and then give the button a special background. This way the toolbar background ha a height say 85% and the button will then have a height that goes 100% so you have 15% above the toolbar.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    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.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    9
    Vote Rating
    1
    nmadrane is on a distinguished road

      0  

    Default

    Oh I see. So you would use overflow : you specify that the toolbar has 50 pixels for the height and then put a background of 65 pixels for a specific button of the toolbar, so that the button goes beyond the toolbar. Am I right ?

    I will try that, but I am not sure that the toolbar will allow that something goes beyond its limits.

    Thanks !

  5. #4
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,232
    Vote Rating
    1057
    Answers
    3647
    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

    No, I'm saying let the toolbar have say 65px but have the background have 50px and then the button let it have a background that goes 65px.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    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.

  6. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    9
    Vote Rating
    1
    nmadrane is on a distinguished road

      0  

    Default

    Ok, thanks
    That should work.

Thread Participants: 1

Tags for this Thread