PDA

View Full Version : Ext.ux.slide.View



wnielson
24 Feb 2013, 3:41 PM
My first attempt to make a Facebook-like sliding navigational component, SlideNavigation (http://www.sencha.com/forum/showthread.php?173990-Sliding-Side-Menu), has proved to be pretty useful. However, I've gotten a lot of queries from people asking how to make it work in ways that I never originally intended. Some of the most frequent requests are:


Support for both left and right menus simultaneously
Using components other than a list in the menu
Support for multiple slide navigation instances in the same app
Nesting the slide navigation inside other components


With the way that the component is currently designed, achieving any of these would require quite a bit of code changes. So, I've started working on an updated version that is more flexible. I've decoupled the navigation component from the slide component. As a result, all of the above use-cases are now possible and I'm calling the new component 'Ext.ux.slide.View'.

I'll be uploading the code onto GitHub and would love to get some help finishing it. In the meantime, here is a short video to highlight some of the new features of the component.


https://vimeo.com/60405792

mitchellsimoens
24 Feb 2013, 5:19 PM
Looking pretty good!

sailei1
24 Feb 2013, 5:21 PM
Top look!

ingo.hefti
26 Feb 2013, 7:47 AM
cool stuff! have you ever thought about further expanding this so that it could be used as it is on a phone but as a splitview on a tablet?

shepsii
26 Feb 2013, 11:59 AM
Great to hear this is still alive and well - it's looking great! Can't wait to see what you come up with. Let us know when it's up on github

shepsii
26 Feb 2013, 2:15 PM
oh and if you're looking for help on the code, I'd be happy to help out. I have this so far: https://github.com/shepsii/sidenav but no reason to kill one bird with two stones ;-)

wnielson
26 Feb 2013, 4:46 PM
oh and if you're looking for help on the code, I'd be happy to help out. I have this so far: https://github.com/shepsii/sidenav but no reason to kill one bird with two stones ;-)

I'd love the help dude. I just put the code up on GitHub, but beware it is pretty rough. I literally whipped this together in day. Some stuff is borrowed from my SlideNavigation implementation, but there is a lot of new code in there, so there are bugs aplenty.

My initial plan is to implement at least two main components; the main view (Ext.ux.slide.View) and a convenience class (Ext.ux.slide.List). The slide List would make it easy to achieve functionality like SlideNavigation provides, and could be used as the component on either or both the right and left side. Of course, I'm also totally open to suggestions.

Also, I'm pretty partial to implementing this without a controller--a la the core Sencha components. I like the idea of keeping things simple for people wanting to use this and providing all the base functionality in a single component is really tidy way to achieve this. The 'Ext.ux.slide' namespace also makes it easy to integrate into existing project. My two cents anyway.

gkatz
26 Feb 2013, 11:55 PM
shepsii, wnieolson
great to see you collab on stuff like this.
that's why I love this forum. all about sharing and contributing.
kudos.

shepsii
27 Feb 2013, 1:18 AM
Absolutely agree re: controller. The reason it's like that in the example I posted is that the code was ripped out of an application I'm building - hence the full on MVC - but building a component means it should all be on the view, I completely agree. People should be able to use it the same way they do other sencha touch components.

I'll go ahead and take the conversation over to github... cheers!

gkatz
3 Mar 2013, 3:21 AM
@shepsii
(http://www.sencha.com/forum/member.php?366613-shepsii)are you going to make your extension component like? I want to start using it but want to wait for this change.
thanks,

shepsii
3 Mar 2013, 3:42 AM
Hey,

I PM'ed wnielson about collabing on this so hopefully we can have this component and my example can just serve to help some people learn a little more about Sencha Touch. But I guess I'll look into it at some point, I just don't want to duplicate efforts if possible.

hotdp
5 Mar 2013, 11:24 PM
Looking good!
Are there a link for Git? I would love to use this implementation.

gkatz
5 Mar 2013, 11:28 PM
https://github.com/wnielson/sencha-SlideView

hotdp
5 Mar 2013, 11:36 PM
https://github.com/wnielson/sencha-SlideView

Thank you

wnielson
6 Mar 2013, 2:46 PM
I've started putting together an example application for the newer slide view component. You can find a very, very early version of it here (https://github.com/wnielson/sencha-SlideViewExample). To get an idea of what it looks and feels like, check out the video:


https://vimeo.com/61218996

hotdp
6 Mar 2013, 11:39 PM
I've started putting together an example application for the newer slide view component. You can find a very, very early version of it here (https://github.com/wnielson/sencha-SlideViewExample). To get an idea of what it looks and feels like, check out the video:


https://vimeo.com/61218996

Hi it looks awesome!
When trying to run the example I get:

http://localhost:8888/slideviewexample/ux/slide/view.jsFailed to load resource: the server responded with a status of 403 (Forbidden)
http://localhost:8888/slideviewexample/ux/slide/View.js?_dc=1362641745728Failed to load resource: the server responded with a status of 403 (Forbidden)

(After I have copied touch)

wnielson
7 Mar 2013, 8:12 AM
Hi it looks awesome!
When trying to run the example I get:

http://localhost:8888/slideviewexample/ux/slide/view.jsFailed to load resource: the server responded with a status of 403 (Forbidden)
http://localhost:8888/slideviewexample/ux/slide/View.js?_dc=1362641745728Failed to load resource: the server responded with a status of 403 (Forbidden)

(After I have copied touch)

See the README (https://github.com/wnielson/sencha-SlideViewExample/blob/master/README).

hotdp
7 Mar 2013, 8:28 AM
Thank you, that readme is very helpfull ;-)
Btw.
I will try to convert it to SA

hotdp
7 Mar 2013, 10:03 AM
Sorry for all the trouble.
I run choose two commands from the goot of the dir(I don't see anything happen).
I copy sencha-touch-2.1.1-gpl.zip content into zip.
But I get this error:

sencha-touch.js:21TypeError: 'undefined' is not an object (evaluating 'h.substring')

I hope you will help me...

Ps. The problem is in: sencha-touch.js
If I use the sencha-touch-all.js file it works just fine.

wnielson
9 Mar 2013, 4:52 PM
Sorry for all the trouble.
I run choose two commands from the goot of the dir(I don't see anything happen).
I copy sencha-touch-2.1.1-gpl.zip content into zip.
But I get this error:

sencha-touch.js:21TypeError: 'undefined' is not an object (evaluating 'h.substring')

I hope you will help me...

Ps. The problem is in: sencha-touch.js
If I use the sencha-touch-all.js file it works just fine.

Yeah, I noticed that too. Latest GitHub version fixes that.

gkatz
10 Mar 2013, 1:42 AM
loved this component. solved many of the issues I had with the original one.
can't wait to see it evolve and stabilize...

hotdp
10 Mar 2013, 11:34 PM
It is a super component!
I have a question, when the menu is visible the container view is not clickable.
How can you then use the menu button to show/hide the menu?

hitman01
15 Mar 2013, 10:38 AM
I'm would like to integrate a side sliding menu into my application, however I would like to use the navigation view so that I would have the back button capabilities and deep linking. I would like to use sliding menu for top level links but at the same time having it available on all the pages.

What is the best solutions for my use case?
Should I try the Ext.us.slide.View or should I go with Ext.ux.slidenavigation.View?

gkatz
17 Mar 2013, 4:57 AM
wnielson (http://www.sencha.com/forum/member.php?17106-wnielson);
I am trying to figure out how to achieve the following:
1. I have a view that includes a carousel. your slideview main container is dragable (by default in your code) and my carousel is scrolling horizontally. when I scroll the carousel the 'left container' opens as well (the menu opens)... can I bypass this?
2. when dragging the container its opacity is changed so that the layer below is shown. I don't need this behavior and I am trying to dispose of it. any ideas? (probably a dragable question but could not find an answer in the docs)
3. there is a public 'close' method, but no open or toggle. is there a reason?
4. you have committed a preliminary version of this (readme says its experimental and index html states css should move to JS). are you planning to change these soon?

thanks for your help.

tyladurdan
17 Mar 2013, 9:39 AM
Never used git other than to download other things so I've no idea how what to do with this git submodule stuff so I can't test the component.

Is there a simple live version available somewhere so people who don't know about git can view/use it?

Thanks!

raw
19 Mar 2013, 12:57 AM
Never used git other than to download other things so I've no idea how what to do with this git submodule stuff so I can't test the component.

Is there a simple live version available somewhere so people who don't know about git can view/use it?

Thanks!

Same here!
Requesting a simple sample, so I can use this in PhoneGap on mobile phone (locally).

JacobGu
4 Feb 2015, 1:54 PM
I started developing an app with the earlier SlideNavigation extension, but ran into a roadblock when I tried to add a second instance of the slide navigation component on a different card. It doesn't work, and then I saw this thread acknowledging that issue and also introducing this SlideView extension. But I wasn't clear whether the SlideView supports multiple instances on different cards.

So, does the SlideView support multiple instances on different cards?

SlideNavigation seems to be been kept more up-to-date. Is SlideView reliably working on ST 2.4?

------------

UPDATE # 1:

So I just tried the SlideView with multiple instances on different cards, and it doesn't work. On the first card that appears, the menu list won't slide open. Any suggestions?

------------

UPDATE # 2:

So I have a working solution: I went back to the other SlideNavigation component, and made the model name unique for each instance, and that fixed it.