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 ?

    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 Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    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 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.

  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 Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    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 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.

  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