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.
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?
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.
My requirement is to achieve facebook style animation of homescreen. The animation should happen on tap...
Its great to see this example working on drag event. How difficult it would be to use a tap event instead of a drag event and get the animation done. When I looked at the code I thought that it is a bit tightly coupled with list. Kindly let me know if anyone has any kind of progress on this ? :-)
My requirement is to achieve facebook style animation of homescreen. The animation should happen on tap...
Its great to see this example working on drag event. How difficult it would be to use a tap event instead of a drag event and get the animation done. When I looked at the code I thought that it is a bit tightly coupled with list. Kindly let me know if anyone has any kind of progress on this ? :-)
Sliding Side Menu
Reply With Quote
