Hybrid View

  1. #1
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    13
    wnielson will become famous soon enough

      5  

    Default Sliding Side Menu

    Sliding Side Menu


    Update

    The most recent version of this plugin can be found on GitHub. For a list of the most recent changes and bug fixes, see the changelog.

    Original Post:

    I've recently started working on a new app using Sencha Touch and wanted to implement a side navigation menu much like in the Facebook mobile app.

    Screen Shot 2012-01-12 at 3.55.59 PM.jpg

    I've managed to create a simple version of it by subclassing Ext.Container and adding in some custom items, like a store to hold the list items and a container to hold the actual content. To access the menu, simply slide (drag) from left to right across the main panel (the reverse action hides it). I'd love to find a way to get slide animations working with the hide/show function of the list, but I'm kind of stumped on how to do that right now. If anyone is interested, I've put what I have online: https://github.com/wnielson/sencha-SlideNavigation. If anyone also has any ideas on adding the animation or improving the code, I'm all ears.

  2. #2
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    13
    wnielson will become famous soon enough

      0  

    Default Stacking containers

    Stacking containers


    I've been playing with this a bit more and have modified it so that the container is draggable now. This more closely emulates the behavior that I'm going for--as you "pull" the main container to the right, the menu below (in the z-plane) and to the left is revealed. However, I'm having problems with "stacking" of containers. I don't see a built-in layout in Sencha Touch that supports stacking one container on top of another in such a way that if the top container is offset, the one below becomes visible. Can anyone give me some tips on how to achieve this?

  3. #3
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    13
    wnielson will become famous soon enough

      2  

    Default Example

    Example


    I've added a live example here for anyone interested. You can access the menu by "flicking" right; if the "flick" is "hard enough", the pannel will slide to the right, fully revealing the menu below. The same action to the left can be used to close it. I'm still working on how to add a bit of a delay to the dragstart event so that the user doesn't accidentally drag the main container while scrolling the content.

  4. #4
    Sencha User
    Join Date
    Apr 2010
    Posts
    2
    Vote Rating
    0
    ddaguro is on a distinguished road

      0  

    Default This is sick!!!

    This is sick!!!


    Great job on this!!! This is very exciting!

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    529
    Vote Rating
    17
    estesbubba will become famous soon enough

      0  

    Default


    Excellent work!

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    Cedar Rapids, IA
    Posts
    63
    Vote Rating
    1
    aoathout is on a distinguished road

      0  

    Default


    Very nice! Thanks.

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Location
    Austin, TX
    Posts
    43
    Vote Rating
    0
    tthai is on a distinguished road

      0  

    Default


    Pretty awesome! FYI, it doesn't work on android 2.3 when I tried it. Works great on iphone 5.

  8. #8
    Sencha User
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
    selina88k is on a distinguished road

      0  

    Default


    this is not working with sencha touch beta3.. anyone know what is the problem?

  9. #9
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Vote Rating
    13
    wnielson will become famous soon enough

      0  

    Default


    Yeah, it broke with the beta builds. I'm working on updating it to work with beta 3.

  10. #10
    Sencha User
    Join Date
    Nov 2013
    Posts
    48
    Vote Rating
    1
    MonkeySleeve is on a distinguished road

      0  

    Default


    I was able to create a nice slide menu by creating a titlebar with the buttons that enable the menu's on the left and right, but since i switched to a navigation view and i have added the buttons to the navigationbar, the sliding animation seems off.
    senchabug.png

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar