PDA

View Full Version : Sliding Side Menu



wnielson
12 Jan 2012, 4:06 PM
Update

The most recent version of this plugin can be found on GitHub (https://github.com/wnielson/sencha-SlideNavigation). For a list of the most recent changes and bug fixes, see the changelog (https://github.com/wnielson/sencha-SlideNavigation/blob/master/CHANGES).

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.

30673

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.

wnielson
12 Jan 2012, 9:01 PM
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?

wnielson
15 Jan 2012, 5:57 PM
I've added a live example here (http://wnielson.github.com/sencha-SlideNavigation/) 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.

ddaguro
18 Jan 2012, 11:15 PM
Great job on this!!! This is very exciting!

estesbubba
19 Jan 2012, 7:05 AM
Excellent work!

aoathout
19 Jan 2012, 8:58 PM
Very nice! Thanks.

calmdev
4 Feb 2012, 12:46 AM
Nice work on this B)

atik.kazi
6 Feb 2012, 2:30 AM
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 ? :-)

tomalex0
6 Feb 2012, 5:50 AM
Very well Done :)

atik.kazi
9 Feb 2012, 3:03 AM
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 ? :-)

digeridoopoo
9 Feb 2012, 3:41 AM
There is a similar example in the Sencha Touch cookbook....

:-)

tthai
10 Feb 2012, 12:29 PM
Pretty awesome! FYI, it doesn't work on android 2.3 when I tried it. Works great on iphone 5.

selina88k
16 Feb 2012, 1:38 AM
this is not working with sencha touch beta3.. anyone know what is the problem?

wnielson
16 Feb 2012, 7:47 AM
Yeah, it broke with the beta builds. I'm working on updating it to work with beta 3.

hotrod
16 Feb 2012, 12:14 PM
Awesome wnielson! Please poste when you get it working in Beta 3, i'm trying but i don't understand the framework enough yet to know how to fix it. I also would like it to behave more like the FB app and instead of using a drag motion, just have a button that is pressed to open/close it. Any pointers on how to modify it to do that would be great, thanks!

wnielson
16 Feb 2012, 12:56 PM
Adding a button would be pretty easy. The reason that I didn't do it by default is because I didn't want to force the container to require the use of a titlebar. Therefore, by default the sliding is controlled by the drag event (actually, in the FB iPad app you can drag the container to the right without having to tap the button as well).

Anyway, for adding a button that opens/closes the menu, you'd want to configure it to have a toolbar; something like this should work in the config for your SlideNavigationPanel instance (untested):



Ext.create('app.view.SlideNavigationPanel', {
fullscreen: true,
list: {
width: 250
},
defaults: {
style: 'background: #fff',
xtype: 'container'
},

// This is the important bit
container : {
items: [{
xtype: 'toolbar',
docked: 'top',
items: [{
xtype: 'button',
text: 'open', // Or use an iconCls config instead
handler: function(button, e, eOpts) {
var slidepanel = button.up('slidenavigationview');
if (!slidepanel.isClosed()) {
slidepanel.closeContainer();
button.setText('open');
} else {
slidepanel.openContainer();
button.setText('close');
}
}
}]
}]
},

items: [{
title: 'Item 1',
group: 'Group 1',
items: [{
xtype: 'panel',
html: '<h1>Here is Item 1</h1>'
}]
}]
});


You can see here (https://github.com/wnielson/sencha-SlideNavigation/blob/gh-pages/lib/slide/View.js#L23) that I've made configuration of the container user-customizable, thus you shouldn't have to modify the source code of the SlideNavigationPanel.

hiroprotagonist
16 Feb 2012, 1:15 PM
Wnielson,
Really a nice One and exactly what i was searching for.
I did make it running with 2.0 pr4 (some Things have obviously changed, there is no Index property in the item of the list, subitems are not taken over but the essential problem is that the Drag Event is not preventable anymore. That does mean that the list is shown on any drag operation inside of the container. Any idea how to fix that?

If You like me to, i can send over the changed i did.

wnielson
16 Feb 2012, 3:26 PM
Thanks hiroprotagonist. I've updated the component to work with beta 3. It still has a few bugs I'm trying to iron out, one of which is the lack of ability to cancel the drag event (but I think I have an idea for a work around).

hotrod
16 Feb 2012, 3:40 PM
Thanks for making progress on this guys! The inability to cancel the drag seems like something that either can be done differently now in b3 or might be something to bring to the developers attention to fix for the next release?

wnielson
16 Feb 2012, 3:41 PM
I've just updated the code to fix the drag behavior. Turns out the method for preventing an action has changed in the beta--the code now behaves like before.

trinitrotoluen
16 Feb 2012, 9:57 PM
wow, very nice ! thanks ~o)

hiroprotagonist
17 Feb 2012, 12:23 AM
wnielson,

looks like the solution to the drag event was much more simply than I thought. It can be so easy if one knows the details :). Many thanks! btw: it looks like it also works with PR4 now.

Kith
20 Feb 2012, 10:59 AM
Thanks for working on this! This is exactly what I needed. I'm having some trouble, however, with the tool bar buttons. I copied exactly what you have in your app.js (word for word) into my app.js, and although I am able to drag the toolbar back and forth, the toolbar button does not open the side panel. Any ideas?

Thanks again!

wnielson
20 Feb 2012, 2:20 PM
Thanks for working on this! This is exactly what I needed. I'm having some trouble, however, with the tool bar buttons. I copied exactly what you have in your app.js (word for word) into my app.js, and although I am able to drag the toolbar back and forth, the toolbar button does not open the side panel. Any ideas?

Thanks again!

So the slideButton is being added to the toolbar but the button doesn't work? Can you post a code snippet perhaps? I can't think of a reason off the top of my head why the button wouldn't be firing the toggle function....

Kith
21 Feb 2012, 6:12 AM
Well, it seems to be firing the toggle function correctly (I verified by adding some log statements). There are no errors at all, but the call to draggable.setOffset(offsetX, 0, duration) doesn't seem to be doing anything. I am very new to this, so I'm sure it is a dumb mistake on my part :-/

wnielson
21 Feb 2012, 7:32 AM
Well, it seems to be firing the toggle function correctly (I verified by adding some log statements). There are no errors at all, but the call to draggable.setOffset(offsetX, 0, duration) doesn't seem to be doing anything. I am very new to this, so I'm sure it is a dumb mistake on my part :-/

Are you using Beta 3? The behavior of setOffset was changed in the newest version, and as such the slide view now only works with beta 3.

Kith
22 Feb 2012, 6:18 AM
Lol whooops. It's working perfectly. Thanks!

hiroprotagonist
24 Feb 2012, 3:58 AM
Guys,

RC1 changed the setOffset method, which expects now x and y parameters instead of the offset object:
setOffset: function(x, y, animation) {

movecontainer shall look something like this then:

moveContainer: function (offsetX, duration) { draggable = this.container.draggableBehavior.draggable; draggable.setOffset(offsetX, 0, { duration: duration || this.config.slideDuration }); },

wnielson
24 Feb 2012, 7:21 PM
Guys,

RC1 changed the setOffset method, which expects now x and y parameters instead of the offset object:
setOffset: function(x, y, animation) {

movecontainer shall look something like this then:

moveContainer: function (offsetX, duration) { draggable = this.container.draggableBehavior.draggable; draggable.setOffset(offsetX, 0, { duration: duration || this.config.slideDuration }); },

Yeah, the code has already been updated updated to account for this and works as expected in RC1.

aaronsama
26 Feb 2012, 7:55 AM
Great work!
That's the replacement to my NavigationView I was looking for.
It still doesn't work on Android 2.3 though. Has anyone managed to solve this problem?

wnielson
26 Feb 2012, 8:24 AM
Great work!
That's the replacement to my NavigationView I was looking for.
It still doesn't work on Android 2.3 though. Has anyone managed to solve this problem?

I don't have an Android device to test with. If anyone can do some testing and submit a patch, I'll add it in.

Thomas The Fourth
29 Feb 2012, 3:16 PM
I don't have an Android device to test with. If anyone can do some testing and submit a patch, I'll add it in.

Hello, I just wanted to see if anyone has an update on the Android status for this? Thanks.

gkatz
1 Mar 2012, 12:16 AM
hell yeahhhhhhhhhhhhhhhhhhhhhhhhhhhhh.
one of the best components I've seen fo sho.

anyways, tested this on my galaxy nexus with ICS 4.0.2:
- on chrome beta - doesnt work at all (but its the first beta so will probably be fixed soon)
- on the default android browser it works. some quirks though mainly due to animation (is there a way to disabe animation?). on the way out the sliding panel adjusts a few pixels from the top. on the way back the sliding panel adjusts it self such that the whole panel goes a few pixels to the right and to the bottom and that adjusts back. looks kinda bad.
I did not look at the code but I used to see such behavior in ST1 when I was relayouting components...

I will use my iphone when I get back home to test this plus film the nexsus's behavior with the iphone and put a link here so that you can see what I am talking about.
BTW, the sliding gesture on the toolbar to open the menu - no sure its a good idea for android cause on chrome sliding like that switches between open tabs...

great component! hope to see it polished some more and finalized - I will surely use it.
thanks for sharing!!

Thomas The Fourth
1 Mar 2012, 7:05 AM
Hey, the issue we're seeing is on older versions of Android (2.x, and 3.x). When the component loads, the list is sitting on top of everything, and selecting any of the items doesn't do anything.

If you don't have a phone running an older version of Android, you can test and see this in the Android emulator that comes with the Android sdk.

Thanks

-Thomas

gkatz
1 Mar 2012, 12:51 PM
here is a movie showing the ICS quirks I mentioned before... you can see the panel going up and down instead of just right and left

http://www.youtube.com/watch?v=Bj6Q5n8Et84&amp;feature=youtu.be

gkatz
3 Mar 2012, 8:30 AM
BTW; and this is more of an MVC architecture question
the sliding menu is a component, yet, in the example, it resides in the view folder of an ST2 MVC app. is that where custom components should go? is view.js the right name?
thanks

gkatz
6 Mar 2012, 9:01 AM
for the components naming see
http://www.sencha.com/forum/showthread.php?185369-custom-components-and-MVC-in-ST2&p=748735#post748735

bnerd
25 Mar 2012, 6:26 AM
I can't get to seem to get this to work in 2.0 final version.

I get this error:

Uncaught TypeError: Cannot call method 'get' of undefined
View.js Line 269

Line 269 in View.js is:
if (!Ext.ModelManager.get(model)) {

bnerd
25 Mar 2012, 8:01 AM
So I fixed the above error by adding "Ext.ModelManager" to the requires.

however I'm now in the View.js initialize function.. it throws an error when the this.list.select(0) is called... there is no item at index 0.

wnielson
25 Mar 2012, 8:06 AM
bnerd, have you added anything to 'items'?

wnielson
25 Mar 2012, 8:09 AM
gkatz, thanks for the link. I'll work this in. BTW, in regards to the ICS quirk you pointed out in the video, I'm not quite sure why that would be happening. I'll try to get the android emulator setup so that I can debug it.

bnerd
25 Mar 2012, 8:10 AM
Thanks for the reply! I'm using the app.js file found on github.... Should I be adding something to that file.

Currently when the run the app it just shows a navigation bar with "Navigation" on it... No list below.

wnielson
25 Mar 2012, 8:14 AM
Perhaps you need to add Ext.dataview.List to the requirements? It's odd that you had to add 'Ext.ModelManager'. Are you using dynamic loading?

bnerd
25 Mar 2012, 8:32 AM
Ext.dataview.List was already added to View.js.... I added it to app.js and still the same error

bnerd
25 Mar 2012, 9:45 AM
and just in case I didn't mention it before.. I'm not using the version of the sdk that you are using on Github.. I'm using the latest Sencha touch sdk.

wnielson
26 Mar 2012, 10:24 AM
I have this working with Sencha Touch 2.0.0. I'm working on restructuring the code now, so I'll see if I can figure out what the issue is.

wnielson
26 Mar 2012, 12:17 PM
bnerd, I've updated the code on GitHub. I've renamed the component to fit the 'Ext.ux' naming convention and have also included all needed classes into the 'requires' config for the component. This version also uses the 'sencha' command for building the example application, so check the README for more info.

For those Android users having issues, I've started debugging the component with the Android SDK, so hopeful I'll be able to get this working with Android soon.

wnielson
26 Mar 2012, 3:30 PM
I've just updated the GitHub code again, this time with initial Android support. I've only tested it on 2.3.3, but I'll test it on other versions soon.

bnerd
26 Mar 2012, 6:30 PM
Just tried out the new code!! progress has been made! I'm now able to see the navigation list! But the top sliding view isn't there. I've attached an image of how the app looks when it opens..

33178

wnielson
26 Mar 2012, 6:45 PM
Yeah, you know I think I broke it when I added the Android stuff. I just committed a newer version that should be working correctly.

bnerd
26 Mar 2012, 6:52 PM
YES! The new commit works perfectly! Thanks so much!

bnerd
26 Mar 2012, 6:58 PM
By the way... the Android problem that was mentioned earlier about the sliding view jumping around. It's doing that exact same thing on iPad also.

So could it be a size/resolution issue?

Just thought I'd let you know. Keep up the great work!

-----

Edit... it only happens on the first item. items 2-8 in the list work perfect. Just tested.

wozznik
27 Mar 2012, 5:29 AM
I've been working in other implementation of Slider menu (Facebook-like menu) that you can found here: https://github.com/wozznik/Slider-Menu

You can also try the DEMO (http://wozznik.github.com/Slider-Menu)

wnielson
27 Mar 2012, 6:30 AM
By the way... the Android problem that was mentioned earlier about the sliding view jumping around. It's doing that exact same thing on iPad also.

So could it be a size/resolution issue?

Just thought I'd let you know. Keep up the great work!

-----

Edit... it only happens on the first item. items 2-8 in the list work perfect. Just tested.

Hmm, I've tested it on the iPad, both a real device and the simulator, and cannot see the issue you're speaking of. What version on iOS?

bnerd
27 Mar 2012, 7:42 AM
iPad (3rd Gen) iOS 5.1

It works perfectly fine on all the other list items. (NOTE: I'm not testing on a build version.. I haven't run the build script.. so that may be an issue too).

****
Not sure if I should ask here, but are you thinking about making this like the Path app also? Where you can swipe the whole view left or right and a different menu shows on each side? The menu on the right however pushes another view into the navigation.

Just thought I'd request that :-)

wnielson
27 Mar 2012, 8:18 AM
iPad (3rd Gen) iOS 5.1

It works perfectly fine on all the other list items. (NOTE: I'm not testing on a build version.. I haven't run the build script.. so that may be an issue too).


Can try removing the img tag from item 1 and replace it with text to see if the glitch goes away?

As for Path behavior, I'm actually not familiar with how their menu works, but I'll check it out. No promises though.

bnerd
27 Mar 2012, 9:33 AM
Yes, removing the image fixed the issue.
Thanks again!

One last question about your component. Can I remove the automatic sorting on the hidden menu's list?

wnielson
27 Mar 2012, 9:39 AM
Thanks again!

One last question about your component. Can I remove the automatic sorting on the hidden menu's list?

That's a good point and one that I've been meaning to address. Since the menu supports grouping, it isn't as simple as just keeping the items in the order in which they are listed. Therefore, I think I'll add an optional 'order' config. I'll make that change now, as I actually need that for another project I'm working on, and I'll post back when when it's been updated.

wnielson
27 Mar 2012, 10:35 AM
Ordering has been implemented. You can now define the order for both groups and items. To order items, simply add an 'order' parameter to an item's config. To order groups, add a 'groups' parameter to the slidenvigation.View configuration, which should be an object mapping group names to order index. So for example:



Ext.define('MyView', {
extend: 'Ext.ux.slidenavigation.View',
config: {
groups: {
'Group 2': 1,
'Group 1': 2
},

items: [{
group: 'Group 2',
html: 'Item 3',
order: 2
},{
group: 'Group 2',
html: 'Item 2',
order: 1
},{
group: 'Group 1',
html: 'Item 1'
}]
}
});


Look at 'app/view/Main.js' for a more complete example.

bnerd
27 Mar 2012, 10:46 AM
=D> You are the awesome! Thanks so much!

bnerd
3 Apr 2012, 12:15 AM
Hi wnielson,

Ran into another not-so-major issue.

When using a view that is a navigation view. I don't see to have a way to select the slideButton selector. Normally this is toolbar or titlebar. None of those work with the navigation view. So I tried navigationbar, navigationBar, and navigation-bar. None of those worked.

Do you know how we can include the slide button onto a navigation view?

gkatz
3 Apr 2012, 1:26 AM
Hi;
the github rep readme file states this component was tested with android 4.0.3. was it on a real devices? or the emulator?
if on a real device, did you experience the behavior I showed in the video I posted not to long ago about the strange re-adjusting of the sliding window in close/open actions?
thanks

s.t.a.s
3 Apr 2012, 4:24 AM
Guys, how to detect selection of the items in this view? I added two items and views for each item. I have a function for refreshing data in views. But I can't figure out how detect tap on items, 'cause this component, as I see, hasn't listeners. How to do it?

Here is my code:

Ext.define("MyApp.view.MyPanel", { extend: 'Ext.ux.slidenavigation.View',


requires: [
'Ext.Container',
'Ext.MessageBox',
'Ext.Panel',
'Ext.Toolbar',
'Ext.event.publisher.Dom'
],


config: {
fullscreen: true,
slideSelector: 'x-toolbar',
selectSlideDuration: 200,
list: {
maxDrag: 400,
width: 200,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: '',
centered: false,
width: 200,
left: 0
}
}]


},


groups: {
'Customers': 1,
'Options': 2
},


defaults: {
style: 'background: #fff',
xtype: 'container'
},
items:
[
{
title: 'Customers',
group: 'Customers',
slideButton: {
selector: 'toolbar'
},
items: [
{
xtype: 'toolbar',
title: 'Customers',
docked: 'top'
},
AccountList
]
},
{
title: 'Contacts',
group: 'Customers',
slideButton: {
selector: 'toolbar'
},
items: [
{
xtype: 'toolbar',
title: 'Contacts',
docked: 'top'
},
ContactList
]
},
{
title: 'Options',
group: 'Options',
slideButton: {
selector: 'toolbar'
},
items: [
{
xtype: 'toolbar',
title: 'Options',
docked: 'top'
}, {
styleHtmlContent: true,
xtype: 'panel',
layout: 'card',
html: '<p>In Work</p>'
}
]
}
]
}
});

s.t.a.s
3 Apr 2012, 6:16 AM
I've found a solution.
1. In config of my slidenavigation.View I defined my own select-method:


selectListener: this.onSelect

where this.onSelect is my function of update data in lists.
2. In method "onSelect" in View.js (of slidenavigation.View) I added following code:


if (Ext.isFunction(this.config.selectListener)) {
this.config.selectListener(item);
}


Hope, it will help somebody.

wnielson
3 Apr 2012, 7:10 AM
Hi;
the github rep readme file states this component was tested with android 4.0.3. was it on a real devices? or the emulator?
if on a real device, did you experience the behavior I showed in the video I posted not to long ago about the strange re-adjusting of the sliding window in close/open actions?
thanks

I don't have a real Android device to test on, so I could only use the emulator, and no, I didn't observe the weird behavior in the video. Unless I get a real Android device to test on, I'm afraid I won't be of much help here...

Perhaps you can do some debugging? Weinre makes it very easy (http://phonegap.github.com/weinre/). Send me a PM if you want some tips on getting started. I'd love to get Android working properly.

wnielson
3 Apr 2012, 7:12 AM
I've found a solution.
1. In config of my slidenavigation.View I defined my own select-method:


selectListener: this.onSelect

where this.onSelect is my function of update data in lists.
2. In method "onSelect" in View.js (of slidenavigation.View) I added following code:


if (Ext.isFunction(this.config.selectListener)) {
this.config.selectListener(item);
}


Hope, it will help somebody.

I haven't added an event for the item select, mainly because you can do it like this:




Ext.define('MyNavigation, {
extends: 'Ext.ux.slidenavigation.View',
config: {
list: {
width: 250,
maxDrag: null,
itemTpl: '{title}',
grouped: true,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'light'
}],
// Define a custom listener
listeners: {
select: function(list, item) {
Ext.Msg.alert('Select', 'You selected an item');
}
}
},
// ... more config here...
}
});


Perhaps I'll add a custom event to the navigation View itself, so that you don't have to overload the list config.

wnielson
3 Apr 2012, 7:21 AM
Hi wnielson,

Ran into another not-so-major issue.

When using a view that is a navigation view. I don't see to have a way to select the slideButton selector. Normally this is toolbar or titlebar. None of those work with the navigation view. So I tried navigationbar, navigationBar, and navigation-bar. None of those worked.

Do you know how we can include the slide button onto a navigation view?

Yup, this is possible, you just have to get a bit tricky. Lets say you've defined your slideButton like so:



slideButton: {
selector: '[name="slidetoolbar"]',
iconCls: 'list'
},


Then, in your navigationview you need to overload the NavigationBar config:



Ext.define('MyNavigationview', {
extends: 'Ext.navigation.View',
config: {
navigationBar: {
docked: 'top',
name: 'slidetoolbar',
items: [{
xtype: 'button',
ui: 'back',
hidden: true
}]
},
// ... other config items here ...
}
})

bobpardoe
10 Apr 2012, 2:04 AM
I am running the code downloaded from GitHub with v2.0.0 of Touch. Your demo works fine in the same Google browser. Running on Ubuntu.

I have taken your main.js as my class and I can display it fine and it works fine but no text ...

I can see the text in the html, for both the groups and the items, but nothing shows on screen. The click events all work too. No errors in the debug console.

I don't have a device to test on.

Any ideas ?

Thanks

BOb

FBlack
16 Apr 2012, 12:43 AM
Hi,
I want to change the List for a Panel with buttons and Slide from up to bottom. How I can to do this?

bnerd
24 Apr 2012, 9:33 AM
so wnielson

I'm loving this component. I have a question.. Can i listen for when the sliding view finishes it's animation and then find out if it is open or closed?

I want the menu to behave just like facebook so that if the user is navigating in a view and swipes the menu open... I can change the back button to a slide button... and then when the menu closes I can change the slide button back to a back button.

Hope that makes sense lol.

wnielson
1 May 2012, 5:21 PM
I am running the code downloaded from GitHub with v2.0.0 of Touch. Your demo works fine in the same Google browser. Running on Ubuntu.

I have taken your main.js as my class and I can display it fine and it works fine but no text ...

I can see the text in the html, for both the groups and the items, but nothing shows on screen. The click events all work too. No errors in the debug console.

I don't have a device to test on.

Any ideas ?

Thanks

BOb

Probably some CSS issues that have to be worked out. What browser are you seeing these issues in?

wnielson
1 May 2012, 5:24 PM
Hi,
I want to change the List for a Panel with buttons and Slide from up to bottom. How I can to do this?

You'd have to do some pretty heavy modifications to get that behavior. There really isn't an easy way to go about this without getting your hands dirty and making some changes to the class.

wnielson
1 May 2012, 5:26 PM
so wnielson

I'm loving this component. I have a question.. Can i listen for when the sliding view finishes it's animation and then find out if it is open or closed?

I want the menu to behave just like facebook so that if the user is navigating in a view and swipes the menu open... I can change the back button to a slide button... and then when the menu closes I can change the slide button back to a back button.

Hope that makes sense lol.

Currently there isn't an easy way to listen to an 'open' or 'close' event, but that would be a nice feature to add. I'll add that to the todo list.

bobpardoe
1 May 2012, 10:20 PM
Originally Chromium on Ubuntu 11.01 64bit. Since then I have deployed the same code (but not minified) to an iPhone where it works fine and an iPad (v2) where it does not.

BOb

jerrytieng
10 May 2012, 4:33 PM
Hi guys

I'm 15 days into Sencha Touch, PhoneGap, Xcode development and I'm going through all the various examples on the web and on this forum. I have also completed learning by examples in the Sencha Touch Cookbook by Ajit Kumar but now I am stuck and having difficulty putting together the 'standard' MVC directory structure and the fantastic Sliding Side Menu example and making it run.

I think it's a total lack of understanding of the MVC setup as I got as far as the 'applicationloadingindicator' but it seems like my app is not 'launching'

May I request for help in the form of a nudge in the right direction - reading material, actual directory structure, or anything please? Thank you.


Xcode : 4.3.2
Cordova : 1.6.1
Sencha : 2.0.0
iOS Simulator : iPad 5.1 Simulator

Feeling-really-not-so-smart right now.

xolytem
18 May 2012, 4:57 AM
Hi,

I am new to sencha touch, and I am playing with your slidenavigationview. I'd like to remove the toolbar, and the slide-button within it, keeping the draggable function of course.

Removing the slide-button is easy, but when removing the toolbar, the drag event is no more fired. I guess the idea would be to attach this event to the container view itself, but I don't know where to modify your code (I managed to identify different functionalities but did not obtained any satisfying result :(

if anyone can help that would be great !

fred. :D

Kachipun
22 May 2012, 2:39 AM
Hi there!
First of all Awesome job on the Facebook Menu!

Im currently using it on one of my apps im developing, and i would like to know if there is any way of separating the list items in the menu into their own views?

Best Regards

mayankarora1988
25 May 2012, 2:04 AM
Hi ,
This https://github.com/wnielson/sencha-SlideNavigation example is perfectly work in android 3.2 but not work in 2.3 and 4.0.

Any help or any additional setting in android 2.3 and 4.0.


Thanks
Mayank

thang_ibrahim
2 Jun 2012, 6:10 AM
u don't remove old cards when new item in menu tapped to keep the DOM clear?

wnielson
2 Jun 2012, 1:06 PM
u don't remove old cards when new item in menu tapped to keep the DOM clear?

No the items are cached, not deleted. If you have a lot of views, then this approach may begin to slow things down as more and more memory will be consumed when items are created. However for a modest number of views, caching will give better performance as we don't have to constantly modify the DOM and create/delete items.

wnielson
6 Jun 2012, 11:44 AM
Hi ,
This https://github.com/wnielson/sencha-SlideNavigation example is perfectly work in android 3.2 but not work in 2.3 and 4.0.

Any help or any additional setting in android 2.3 and 4.0.


Thanks
Mayank

Mayank,

You probably need to play around with the CSS values (check the z-index values in particular). If you can find settings that work for all three of those versions of Android, let me know.

Halesway
8 Jun 2012, 4:08 AM
Hi,

This is a great component and is exactly what I need for a project.

I have the latest versions of Sencha Touch 2 and your code from github. Everything works as expected when dragging the view to reveal the menu, but the slide event is not fired when clicking the toggle button either in the toolbar or from any of the sub page buttons.

There are no errors appearing in the log and it appears to be getting in to the 'moveContainer' function just fine, but the draggable.setOffset appears to be doing nothing!

Hope you can help,
Many thanks!

in4p
8 Jun 2012, 5:05 PM
Hi Halesway,

You can manually trigger the slide event on a button tap with a call to toggleContainer - I've done it in an application I'm building. But I would guess you have something wrong in how you've set it up. Maybe you should post some source code?


Hi,

This is a great component and is exactly what I need for a project.

I have the latest versions of Sencha Touch 2 and your code from github. Everything works as expected when dragging the view to reveal the menu, but the slide event is not fired when clicking the toggle button either in the toolbar or from any of the sub page buttons.

There are no errors appearing in the log and it appears to be getting in to the 'moveContainer' function just fine, but the draggable.setOffset appears to be doing nothing!

Hope you can help,
Many thanks!

Halesway
11 Jun 2012, 1:25 AM
Hi Halesway,

You can manually trigger the slide event on a button tap with a call to toggleContainer - I've done it in an application I'm building. But I would guess you have something wrong in how you've set it up. Maybe you should post some source code?

Well toggleContainer ultimately just fires moveContainer in the end anyways, so I'm sure the problem must lie there.

Even with a really stripped down version with just the absolute basics, it still doesnt work...

app.js

Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath('Ext.ux', 'ux');

Ext.application({
name: 'ProjectX',
views: ['Main'],
tabletStartupScreen: 'resources/images/tablet_startup.png',
phoneStartupScreen: 'resources/images/phone_startup.png',

launch: function() {

Ext.Viewport.add(Ext.create('ProjectX.view.Main'));

}
});

Main.js

Ext.define("ProjectX.view.Main", {
extend: 'Ext.ux.slidenavigation.View',

requires: [
'Ext.Container',
'Ext.MessageBox',
'Ext.Panel',
'Ext.Toolbar',
'Ext.event.publisher.Dom'
],

config: {
fullscreen: true,

slideSelector: 'x-toolbar',

selectSlideDuration: 200,

list: {
maxDrag: 200,
width: 200,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Navigation',
centered: false,
width: 200,
left: 0
},
}]

},

defaults: {
style: 'background: #fff',
xtype: 'container'
},

items: [{
title: 'Item 1',
group: 'Group 1',

slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 1',
docked: 'top'
},{
xtype: 'panel',
html: 'fgh'
}]
}]
}
});

It's annoying because the example version at http://wnielson.github.com/sencha-SlideNavigation/ works great.

Halesway
11 Jun 2012, 6:58 AM
Hi,

Well good news for me, it's fixed!

I have been playing about with the SDK Tools today and subsequently downloaded a slightly different version of ST2 from the download page (via the open source > commercial version... rather than the commercial version where you enter an email)

A dropped the slideNavigation Main.js right in and hey presto it now all works!

West19th
14 Jun 2012, 11:34 PM
Hi all.

I love this Sliding Menu. Thanks a lot for that.
By the way ... I have done Sencha Touch native packaging for Android with an app including the Sliding Menu and everything works perfektly. I have used Sencha Touch 2.0.0 and tested on an HTC Android phone with version 2.3.3.

Now I have a question:
I would like to have my own classes for all views instead of defining everything in the Main.js view.
Based on the downloadable example of the Sliding Menu I have added


{

xtype: 'homepanel',
title: 'Home',
group: 'Group 3'
},



as second item in the items section of the Main.js view.

I have added a Home.js view and extended the views section in the app.js like so


views: ['Main', 'Home'],


My Home.js view looks pretty much like this


Ext.define("SlideNavigationExample.view.Home", {
extend: 'Ext.Panel',
xtype: 'homepanel',


config: {
title: 'Home',
iconCls: 'home2',
cls: 'home',

scrollable: true,
styleHtmlContent: true,

items: [

{
xtype: 'toolbar',
docked: 'top',
title: 'Test'
},
],

html: [
'bla bla bla'
].join("")
}
});


In the sliding menu the new 'Button' 'Home' is visible now.
But everytime I click on it the first view defined for Sliding Menu becomes visible.

Anybody got an idea how I can switch to my "external" views?

Thanks a lot

primitive_type
22 Jun 2012, 7:18 PM
Yup, this is possible, you just have to get a bit tricky. Lets say you've defined your slideButton like so:



slideButton: {
selector: '[name="slidetoolbar"]',
iconCls: 'list'
},


Then, in your navigationview you need to overload the NavigationBar config:



Ext.define('MyNavigationview', {
extends: 'Ext.navigation.View',
config: {
navigationBar: {
docked: 'top',
name: 'slidetoolbar',
items: [{
xtype: 'button',
ui: 'back',
hidden: true
}]
},
// ... other config items here ...
}
})



Hi wnielson,

Thanks for making this awesome plugin. In my navigation view, I am not able to get the slide nav menu to appear more than once. For example, I slide it out, and then press the "Back" button in my navigation view, and after that point I am no longer able to access the slide nav menu until I reload my app. Any ideas?

Thanks!

thang_ibrahim
27 Jun 2012, 2:11 AM
36579


I'm in item1. I 've some action in controller, then i want setActiveItem() item 6. How can i do that

coolfish
3 Jul 2012, 6:11 AM
I had a heck of a time getting this to work on OS X. Steps to get it to work:

1) Get the SDK Tools, install to somewhere, make sure any and all path variables for previous versions are gone, $SDK_TOOLS
2) Get the framework, Touch 2.0.1.1 and install to ~/sites/sdk
3) clone the git repository to ~sites/sencha-SlideNavigation
4) create a new app with sencha app create MyFoo ~/sites/myfoo (do this from the $SDK_TOOLS directory)
5) delete the sdk folder from ~sites/sencha-SlideNavigation
5a) copy the /sdk folder from your MyFoo application into the ~sites/sencha-SlideNavigation
6) Edit app.js from ~sites/sencha-SlideNavigation and remove the requires for Ext.Msg or Ext.MessageBox (whatever was in there), otherwise the 'sencha app build -e testing' (which you run from ~sites/sencha-SlideNavigation) does not work - errors out with "Using Ext.Msg without requiring Ext.MessageBox". For some reason, removing the reference to the requires makes it work.

Hopefully this helps someone else whose trying to run this example on OS X using SDK Tools beta3 and Touch 2.0.1.1

Cheers

haruxx
11 Jul 2012, 5:31 PM
Getting this to work on win7 64bit with SDK3 beta, Touch 2.0.1.1

How are you?


questions is can I get sliding menu.
In another view using the sliding menu using DatePicker pop up menu.
Non-float side of the menu to view what changes do you do?



Ext.define('Test.view.unitMain.UnitTest01', {
extend : 'Ext.Panel',
requires: [
"Ext.form.FieldSet",
"Ext.field.DatePicker",
"Ext.field.Number"
],
xtype : 'unittest01',

config : {


layout : "fit",

tab : {
title : 'field Test',
iconCls : 'star'
},


items: [
{
xtype: "panel",
layout: { type: "vbox", align:"middle"},
items: [
{
{
xtype:"datepickerfield",
name:"test_date",
label:"test_date",
value:new Date()
},
{
xtype: "fieldset",
title:"test_field",
items: [
{xtype:"numberfield", id:"test_num", name:"test_num", label:"test_num"}
]
}
}
]
}
]
}
});

gizmoone
12 Jul 2012, 12:00 PM
hello.

in www/sencha-touch-2.0.1.1-gpl/

sencha app create mysoft ../mysoft



in www/mysoft

-app
+controller
+model
+profile
+store
-view
Main.js
+resources
+sdk
.senchasdk
app.js
app.json
index.html
packager.json

with the moduleSlideNavigation from wnielson
in www/slidenavigation

-app
-view
Main.js
+resources
+sdk
-ux
-slidenavigation
View.js
.senchasdk
app.js
app.json
index.html
packager.json

how to integrate this module in MVC architecture sencha touch2

thks

jashsayani
15 Jul 2012, 7:54 PM
This is really useful. Thank you!

Marc_B
18 Jul 2012, 1:22 AM
is it possible to change the list to a tabpanel menu, that would be nice tried but nothing worked any ideas?

Halesway
19 Jul 2012, 12:58 AM
Hi,

Is it possible to dynamically update the items that appear in the list? I don't want to have three instances of the menu with different items, so am looking to just update the one list.

I can't figure out the best way of accessing it ....

Halesway
25 Jul 2012, 12:29 AM
I have been able to dynamically update the list by changing the items in the store.

I still have a massive problem, and i'm not sure if it's a bug because the script was never intended to do what I'm doing or if I'm just doing something wrong...

I'm trying to run two instances of the menu in different panels in my main viewport. If I view one menu, then switch to the other, it is still adding in the first item from the other menu, almost as if it is cached in some way... has anyone come across such a thing before?

Many thanks.

visual-a
7 Aug 2012, 6:03 PM
How have you been able to dynamically update the list? Since he is creating his own store and model inside the component I feel like I have a lot of work ahead of me to convert this into something that can be used with my store proxies and JSON data. Am I missing something?

abbysingh
9 Aug 2012, 1:46 AM
Hey!

I'm loving the implementation of the menu. One issue that I'm having is that the grouping isn't working for me.
Other than that, is there a way, I can have a nested list in the menu? Or maybe an accordion list?

ronan quillevere
22 Aug 2012, 6:10 AM
Thanks for this great component.

I just wanted to show some theming I did with it to make it look a litte bit more sexy.

38150

If anyone else can share their themes it would be nice to have some ideas of what it is possible to do with it :)

breckster
22 Aug 2012, 7:12 AM
I'm using the menu with a navigation view and dataview list. I'm running into is a scrolling issue with the list inside the card layout. The list will scroll but then bouces back to the top of the list. So any list larger than what can be displayed on the screen intially, those list items are inacessible.

This issue seems only to appear on Android 2.3.4 on various hardware

I have tried setting "scrollable: false" everywhere with no effect

Any ideas

Thanks

abbysingh
22 Aug 2012, 10:39 PM
Hey! The theme looks amazing. Is there a way you could give me some CSS for it?

ronan quillevere
22 Aug 2012, 11:35 PM
Here you go, this is the app.scss, do not hesitate to change the colors and show me what yours looks like !




@import 'sencha-touch/default/all';




// Slider
$slider-item-background-color: #494949;
$slider-item-color: white;


$slider-item-border-top: #646464;
$slider-item-border-bottom: #3A3A3A;
$slider-item-selected-border-top: #34ABFF;
$slider-item-selected-border-bottom: $slider-item-border-bottom;


$slider-shadow-color: #222;
$slider-shadow-blur: 10px;
$slider-shadow-spread: 2px;




// Sencha
$toolbar-base-color : #4B4B4B;


// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;




// Your custom code goes here...




/**************** SLIDER ********/


/*List*/
.x-slidenavigation-list.x-list {
background-color: $slider-item-background-color;
}


/*List toolbar*/
.x-slidenavigation-list .x-toolbar-dark {
box-shadow: 0px 5px $slider-shadow-blur $slider-shadow-spread $slider-shadow-color;
z-index: 1;
}


/*Place container*/
.x-slidenavigation-container {
box-shadow: -5px 0px $slider-shadow-blur $slider-shadow-spread $slider-shadow-color;
}


/*List first item*/
.x-slidenavigation-list .x-list-item:first-child .x-list-item-label {
border-top: 0;
border-bottom: 1px solid $slider-item-border-bottom;
}


/*List item*/
.x-slidenavigation-list .x-list-item .x-list-item-label {
border-top: 1px solid $slider-item-border-top;
border-bottom: 1px solid $slider-item-border-bottom;
}


.x-slidenavigation-list .x-list-item {
position: relative;
color: $slider-item-color;
}


/*List selected item*/
.x-slidenavigation-list .x-list-item.x-item-selected .x-list-item-label {
border-top-color: $slider-item-selected-border-top;
border-bottom: solid 1px $slider-item-selected-border-bottom;
}


/*List last item*/
.x-slidenavigation-list .x-list-item:last-child .x-list-item-label {
border-bottom: solid 1px $slider-item-border-bottom;
}


.x-slidenavigation-list .x-list-item-label {
font-size: 0.8em;
}

abbysingh
23 Aug 2012, 3:26 AM
Thanks a lot!

I've been trying to fit a nested list into the slide navigation panel but I'm having trouble. Any advice on that?

breckster
6 Sep 2012, 7:23 AM
I'm using the menu with a navigation view and dataview list. I'm running into is a scrolling issue with the list inside the card layout. The list will scroll but then bouces back to the top of the list. So any list larger than what can be displayed on the screen intially, those list items are inacessible.



This issue seems only to appear on Android 2.3.4 on various hardware

I have tried setting "scrollable: false" everywhere with no effect

Any ideas

Thanks


Bump!

in4p
10 Sep 2012, 7:34 AM
In using the Sliding Side Menu, I noticed that at times there was a delay in painting the page that the user selected in the list, especially when that page was loading a list from a large store. The delay occurred the first time the page was selected (as subsequent times it was already cached).

I subclassed and replaced the onSelect function with the following code which displays the loading mask. Hopefully this helps others too. Still some tweaks required, so feel free to add:



onSelect: function(list, item, eOpts) {
var me = this,
store = list.getStore(),
index = item.raw.index,
container = me.container;


//Close the Container First as the Load looks Silly with it open
this.closeContainer(this.config.selectSlideDuration);
this.setMasked(
{
xtype: 'loadmask'
}
);

if (me._cache[index] == undefined) {
var task = Ext.create('Ext.util.DelayedTask', function() {
this.delaySelect(list, item, eOpts)
}, this);
task.delay(this.config.selectSlideDuration); //Have to delay the load task in order to (i) let the slide menu close and (ii) let the load mask display
}
else {
this.finishSelect(container, index);
}
},


delaySelect: function(list, item, eOpts) {
var me = this,
store = list.getStore(),
index = item.raw.index,
container = me.container;

if (Ext.isFunction(item.raw.handler)) {
me._cache[index] = item.raw.handler;
} else {
me._cache[index] = container.add(Ext.merge(me.config.defaults, item.raw));
// Add a button for controlling the slide, if desired
if ((item.raw.slideButton || false)) {
me.createSlideButton(me._cache[index], item.raw.slideButton);
}
}

this.finishSelect(container, index);
},


finishSelect: function(container, index) {
if (Ext.isFunction(this._cache[index])) {
this._cache[index]();
} else {
container.setActiveItem(this._cache[index]);
}

//Remove Mask
this.setMasked(false);
},


As I said, there are a few tweaks needed. Currently the load mask doesn't animate (it stops the once code to create the subsequent page begins executing).

andrew.archer
14 Sep 2012, 7:14 AM
When running optional custom config on item.raw it was being applied to defaults.

me._cache[index] = container.add(Ext.merge(me.config.defaults, item.raw));

needs to be:

me._cache[index] = container.add(Ext.merge({}, me.config.defaults, item.raw));

biggbest
16 Sep 2012, 8:01 AM
Hi !

First, congratulations for this plugin, we were looking for a menu like that !

Now, I've well implemented it, but it seems that the navigation.view (the default one) doesn't work very well now, I want to use it as some items in the slidenavigation, but the navigationBar created by it always show the Back button, and it doesn't respond :-(

Any known issue with navigationview ?

EDIT: The problem was my fault, I made a navigation view with 3 list, and 1 detail panel. Whatever, it solved. Is there a way to add an icon to the list item ? :-)

totalnotme
1 Oct 2012, 1:11 AM
I have issue with this script.

I have integrate with sencha 2 beta 3 but I can not click the button only slide.

how to fix this.

ronan quillevere
1 Oct 2012, 1:16 AM
I think you should use css to add an icon to your list. Just specify a different class for each item of your list depending on some values of your store with a template (if your are using a store to fill your list of course)

You could use a pseudo-element ::before or ::after to add an icon in your css when you will have managed to add your css classes in your list.

totalnotme
1 Oct 2012, 1:35 AM
sorry i think miss understand.

the left top button and not click only drag can slide the menu.

totalnotme
1 Oct 2012, 1:59 AM
i think I found the problem the title is overlap the button.

but dont know how to fix it.

totalnotme
1 Oct 2012, 7:02 AM
i have fix it by use titlebar

wnielson
9 Oct 2012, 12:46 PM
When running optional custom config on item.raw it was being applied to defaults.

me._cache[index] = container.add(Ext.merge(me.config.defaults, item.raw));

needs to be:

me._cache[index] = container.add(Ext.merge({}, me.config.defaults, item.raw));

Thanks for the fix. I've added it in.

RomeyRome
10 Oct 2012, 1:08 PM
Why can't I override .x-list-normal .x-list-header background-color? No matter what I do, it gets overridden with the global color. I can override background-image, just not color....


.x-slidenavigation-list .x-list-header-item .x-list-header {
border-top: 0;
border-bottom: 1px solid $slider-item-border-bottom;
background-image: none;
background-color: none
}


.x-list-normal .x-list-header {
background-image: none;
background-color: none;
}

ronan quillevere
11 Oct 2012, 4:14 AM
How do you do it ? With sass ? in a separate css ?

Maybe your css is included before the app.css

Maybe you css style is overriden by a deeper style. Give us some more detail.

in4p
11 Oct 2012, 6:21 PM
If you want to customize the view of the list, you should consider using the css mixins for the list class.
http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.List-css_var-S-list-active-color

Remember in your app.scss file you need to define your mixin BEFORE the @include sencha-list line.
E.g.
$list-color: #FFF;
@include sencha-list

Also don't forget to recompile your css classes (compass compile)

Note that the above will change the view for the list for ALL lists in your app.

If you want to define a custom CSS style for just the slide list (I did) you will need to configure the baseCls in your slide list.

Hope it helps!

RomeyRome
11 Oct 2012, 7:06 PM
I was doing it in sass. However I moved to 2.1 since then, and the structure is quite different, so it's kind of a moot point now. I had a pretty close Facebook menu replica though...

RomeyRome
11 Oct 2012, 10:17 PM
Well. I ran into another problem, so I'm just going it throw it in here since It's somewhat related.

I had a modal popup that worked fine in 2.0.1, but in 2.1, it only applies the mask to the slide out menu, and hideOnMaskTap only works on the mask obviously, which is in the menu.

RomeyRome
12 Oct 2012, 1:09 AM
Changing z-index from 5 to 4 fixes the modal problem. Hoping for so side-effects.

jinyoungc
16 Oct 2012, 12:40 PM
I have been able to dynamically update the list by changing the items in the store.

I still have a massive problem, and i'm not sure if it's a bug because the script was never intended to do what I'm doing or if I'm just doing something wrong...

I'm trying to run two instances of the menu in different panels in my main viewport. If I view one menu, then switch to the other, it is still adding in the first item from the other menu, almost as if it is cached in some way... has anyone come across such a thing before?

Many thanks.

Hi Halesway, Could you offer up a code snippet for dynamically updating the list from a store? I was able to achieve something like that by creating a function to loop through my store and add the object to the items array. However, I don't know where to add that function so that the items object would be rendered in the view.

Any kind of help would be greatly appreciated. Thanks!

TheStreet
17 Oct 2012, 1:57 PM
Is anyone else having performance issues with this plugin. I'm specifically using ST2.0.1 and iOS Simulator running iOS 5.1 as well as an iPad 3 running iOS 6.0. I have a carousel with a list inside of each carousel item loading into the main view and the left menu list controlling the activeItem in the carousel. It runs OK on a webkit browser but is choppy on the device. Am I doing too much. Is this just a performance limitation of UIWebview?

aeiz
19 Oct 2012, 6:18 AM
Anyone know of a way to keep the slide button at the left most position when using with a navigation view? I tried modifying the slide button add to be an insert at index 0, but that seemed to have no effect and the back button still appears first in the navigation bar.

This is my modified code:


createSlideButton: function(el, config) {
var me = this,
parent = el.down(config.selector);
if (parent) {
return parent.insert(0, Ext.merge(me.slideButtonDefaults, config));
//return parent.add(Ext.merge(me.slideButtonDefaults, config));
}

return false;
},

Halesway
19 Oct 2012, 6:36 AM
Hi Halesway, Could you offer up a code snippet for dynamically updating the list from a store? I was able to achieve something like that by creating a function to loop through my store and add the object to the items array. However, I don't know where to add that function so that the items object would be rendered in the view.

Any kind of help would be greatly appreciated. Thanks!

Hi,

Sorry for the delayed response, only just seen this thread again today.

Yeah, it took a bit of trial and error and educated guessing honestly to get it working how I wanted. wneilson himself may well cringe at my solution but I wasn't 100% certain what every bit of his code did so some bits might not be applicable to the actual solution. Anyways this is how I got it working for my particular app...

For reasons I wont go in to, we were actually populating the slide menu items with just a hard coded array of new items rather than pulling new items from a store but hopefully it should still be translatable.

I've slightly renamed some attributes and simplified but this is basically the app code:

The contents of my slideMenu instance:


config: {
id: 'exampleSlideOutMenu',
title: 'Home',
iconCls: 'home',
selectSlideDuration: 200,

list: {
maxDrag: 300,
width: 260,
name: 'exampleList',
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'slideMenuUI',

title: {
title: 'Example',
width: 200,
style: 'text-align: left',
left: 0
},
layout: {
pack: 'right'
},
items: [
{
xtype: 'button',
iconCls: 'delete',
iconMask: true,
action: 'closeMenu',
ui: 'slide-menu-btn'
}
]
}]


},


defaults: {
xtype: 'container'
},


items: defaultMenuItems


}


Then in my controller (simplified for here), this is what gets called within a function when I click on a button on my home page that needs to load in the new items in to the slide menu list:


menu = Ext.getCmp('exampleSlideOutMenu');

menu._indexCount = 0;
menu.store.removeAll();
delete menu.config.items;
menu._cache = {};

menu.addItems(dynamicMenuItems);

menu.openContainer();


My app made things slightly more awkward in that it was split in to two main areas. Within each area there are 4 buttons, each which load a new set of items for the menu. I had to make two instances of the slideMenu - one for each side - which to begin with seemed to cause problems because you went to one side and the correct items were shown in the list, but if you actually clicked on one, it was still loading in the pages from the other side.

I found that by including the bits in red, I was able to clear/reset the menu's main variables and load in the fresh new items properly. I don't know if these will apply to you if you only have one instance of the slideMenu, but that's what worked for me.

Hope this helps,

Halesway

in4p
19 Oct 2012, 4:07 PM
I'm actually pretty sure you can't do what you want to.
The work around we use is as follows: we use a custom toolbar on any 'main screen' and hide the navigationbar from the navigation view. On any subsequent view we hide the custom toolbar and show the navigationbar. There are a number of other nuances, and I know it doesn't quite get what your after but hopefully it helps.

You could also look to create an override of the navigationbar, but I'd wish you good luck with that one.


Anyone know of a way to keep the slide button at the left most position when using with a navigation view? I tried modifying the slide button add to be an insert at index 0, but that seemed to have no effect and the back button still appears first in the navigation bar.

This is my modified code:


createSlideButton: function(el, config) {
var me = this,
parent = el.down(config.selector);
if (parent) {
return parent.insert(0, Ext.merge(me.slideButtonDefaults, config));
//return parent.add(Ext.merge(me.slideButtonDefaults, config));
}

return false;
},

aeiz
22 Oct 2012, 1:32 PM
Thanks for the reply! I ended up hiding the slidebutton when a 'push' event is fired on a navigationview and showing it again when a 'pop' event is fired. This works out well considering all of my navigation views only go a single level deep.


I'm actually pretty sure you can't do what you want to.
The work around we use is as follows: we use a custom toolbar on any 'main screen' and hide the navigationbar from the navigation view. On any subsequent view we hide the custom toolbar and show the navigationbar. There are a number of other nuances, and I know it doesn't quite get what your after but hopefully it helps.

You could also look to create an override of the navigationbar, but I'd wish you good luck with that one.

Tegola
9 Nov 2012, 3:45 AM
I'm getting troubles using the SlideNavigationView with a NavigationView. The views pushed inside the NavigationView are not animated, they just appear. Am I the only one?

wnielson
9 Nov 2012, 7:56 AM
I'm getting troubles using the SlideNavigationView with a NavigationView. The views pushed inside the NavigationView are not animated, they just appear. Am I the only one?

I've successfully used NavigationView within SlideNavigationView in the past. Which version of ST are you using? Its possible that there are some issues with ST 2.1 as I haven't yet fully tested the component with the latest release.

abierbaum
16 Nov 2012, 8:28 AM
I've successfully used NavigationView within SlideNavigationView in the past. Which version of ST are you using? Its possible that there are some issues with ST 2.1 as I haven't yet fully tested the component with the latest release.

I just tried SlideNavigationView with ST 2.1 release, and it is not working. The main viewport is initialized with everything in the upper left hand corner of the screen.

Has anyone else gotten it to work with ST 2.1?

Tegola
16 Nov 2012, 8:34 AM
Its possible that there are some issues with ST 2.1 as I haven't yet fully tested the component with the latest release.

I'm using 2.1rc3. As I said, the SlideNavigationView works perfectly, but any NavigationView used as the SlideNavigation child will "navigate" but will not animate (no left-right slide).

abierbaum
16 Nov 2012, 8:54 AM
Have you tried ST 2.1.0? I am interested to know if I am the only one seeing the issue or if something is significantly broken.

totalnotme
16 Nov 2012, 11:07 AM
dude u need to try appcelerator

abierbaum
16 Nov 2012, 11:30 AM
I added a branch on github that has all the code needed to show the issue between 2.0 and 2.1.

See: https://github.com/vrsource/sencha-SlideNavigation/tree/dev/bug_21

i (https://github.com/vrsource/sencha-SlideNavigation/tree/dev/bug_21)f you load the index_nocmd_20.html and index_cmd_21.html you will see how the code works in 2.0 and 2.1.

It appears to me that there is an issue with the new way that docking and layouts are being handled in 2.1 and that it is conflicting with some of the assumptions made for positioning the slidenavigation list and container.

Tegola
16 Nov 2012, 2:01 PM
Have you tried ST 2.1.0? I am interested to know if I am the only one seeing the issue or if something is significantly broken.

I'm not on my office right now. I'll try on monday and let you know.

in4p
16 Nov 2012, 4:48 PM
I can confirm that the Slide Navigator works under ST 2.1.0.

@abierbaum: a number of things have changed in the css styles. If you did an upgrade from an older version of ST, your issues could be caused by that. I suggest you recompile your sass file (compass compile) and it will likely fix your issues. You may need to update the config.rb file to point to the new sdk directory (now called touch) before doing so.

abierbaum
16 Nov 2012, 5:33 PM
@in4p Thanks for the pointer. You are right, I totally forgot to regenerate the css file. I don't know why I didn't think of that. Works with no problems now.

Tegola
19 Nov 2012, 1:02 AM
Just updated to 2.1 final to see whether NavigationViews would start working again or not.
Well, no, they don't. They push views without animating them.

Here's my streamlined code. SlideNavigation:



Ext.define("MyApp.view.Workspace", {
extend: 'Ext.ux.slidenavigation.View',
xtype: 'workspace',

config: {
slideSelector: 'x-toolbar',
selectSlideDuration: 200,

list: {
width: window.innerWidth*0.8,
maxDrag: window.innerWidth*0.8,
grouped: false,
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Navigation'
}]
},

items: [
{
xtype: 'mytasks',
title: 'My tasks',
slideButton: {
selector: 'titlebar',
text: 'Menu',
iconCls: false,
align: 'left'
}
}
]
}
});


NavigationView:

Ext.define('MyApp.view.MyTasks', {
extend: 'Ext.NavigationView',
xtype: 'mytasks',

config: {
title: 'My Tasks',

navigationBar: {
defaults: {
align: 'right'
},
items: [
{ name: 'newtask', text: 'New' },
{ name: 'edittask', text: 'Edit', hidden: true }
]
},

items: {
xtype: 'tasklist',
title: 'My Tasks'
}
}
});


Hope this can be fixed easily.

zonaib
3 Dec 2012, 6:24 AM
hey wnielson ... great work =D>

i have a problem , when i made a package then it gave me error
Cannot call method 'forEach' of undefined

so i need any suggestion...

thanks

jhennard
3 Dec 2012, 9:59 AM
Is anyone having issues using this component with Pickers?

When I use a DatePickerFields within the main content area the Picker is displaying within the left menu navigation pane and not the main content area. The example below shows what happens when I click on the DOB DatePickerField.

40531

wnielson
4 Dec 2012, 4:31 PM
Just updated to 2.1 final to see whether NavigationViews would start working again or not.
Well, no, they don't. They push views without animating them.


I've updated this component to work with 2.1. I'll be updating the code in the repository shortly.

wnielson
4 Dec 2012, 4:33 PM
Is anyone having issues using this component with Pickers?

When I use a DatePickerFields within the main content area the Picker is displaying within the left menu navigation pane and not the main content area. The example below shows what happens when I click on the DOB DatePickerField.


I've never seen this happen before. Perhaps you can play around with the z-index values and see if you can get a configuration that works. Let me know if you get it working and I'll update the code.

jhennard
4 Dec 2012, 5:16 PM
Not sure if this fix will work for everyone, but setting the z-index of the container in createContainer to 4 resolved the issue for me.


style: 'width: 100%; height: 100%; position: absolute; opacity: 1; z-index: 4',

Tegola
5 Dec 2012, 12:15 AM
I've updated this component to work with 2.1. I'll be updating the code in the repository shortly.

Where can I get the updated version other than the repository?

Thanks

wnielson
5 Dec 2012, 2:31 PM
Where can I get the updated version other than the repository?

Thanks

I've just added the new version to GitHub. Besides support for Sencha Touch 2.1, it also add a number of other new features such as events and integrated (and configurable) styling.

coolfish
6 Dec 2012, 1:38 AM
Thanks for this, wneilson!

Someone had previously posted an .xdc of this. Is there a guideline on how to create importable components? I'm trying by adding a component, requiring the sliding menu class, but the configuration options are constantly screwing up - simply copy and pasting the config objects eventually gets to a point where Architect can no longer find the 'config' property (inline html doesn't get escaped properly, or something along those lines).

Thanks again!

s0b
6 Dec 2012, 2:43 AM
Hi!

Very much thanks for this wnielson, is awesome!

Could be this done on both sides? To place a slide menu in the right side too?

Thanks

wnielson
6 Dec 2012, 8:01 AM
Thanks for this, wneilson!

Someone had previously posted an .xdc of this. Is there a guideline on how to create importable components? I'm trying by adding a component, requiring the sliding menu class, but the configuration options are constantly screwing up - simply copy and pasting the config objects eventually gets to a point where Architect can no longer find the 'config' property (inline html doesn't get escaped properly, or something along those lines).

Thanks again!

I've never used Architect and don't have access to a copy of it, so hopefully someone else can help you out with this.

wnielson
6 Dec 2012, 8:05 AM
Hi!

Very much thanks for this wnielson, is awesome!

Could be this done on both sides? To place a slide menu in the right side too?

Thanks

The current implementation won't support this. It would be possible to add, but it isn't a trivial addition.

coladarci
19 Dec 2012, 5:59 AM
So, like everyone else, I love this plugin.

In my application, I'd like to de-couple the items in the navigation from the sections they will show on click. (Think slide-out profile with a few links that I will have custom handlers for).

It seems your example is much like a tabpanel, where the point of it is to easily jump between sections - I'm simply looking to leverage the slide mechanics, etc.

Is this doable or should I just consider writing something simpler from scratch?

Thanks again for this - it's amazing work.

toorshia
19 Dec 2012, 7:22 AM
@coladarci

Well, I pretty much decoupled everything except for menu button click - I even removed draggable feature, just menu button click remains, with content sliding to the side to reveal menu.

Menu item handlers are custom, they handle menu closing along with whatever I need to open.

I have to pull it out of the project I'm currently working on (top-secret hush-hush :D), so be patient for a day or two 'till it's ready :)

wnielson
19 Dec 2012, 8:15 AM
So, like everyone else, I love this plugin.

In my application, I'd like to de-couple the items in the navigation from the sections they will show on click. (Think slide-out profile with a few links that I will have custom handlers for).

It seems your example is much like a tabpanel, where the point of it is to easily jump between sections - I'm simply looking to leverage the slide mechanics, etc.

Is this doable or should I just consider writing something simpler from scratch?

Thanks again for this - it's amazing work.

Thanks, glad you like it! While the component isn't designed to be used in such a way, it doesn't sound like achieving what you want would be too difficult. You can manually manipulate the component's store, which controls what items are displayed in the navigation list and you can also manually control what item is active in the main container. Hope that helps a little--good luck,

mpasumarthi
20 Dec 2012, 3:34 AM
Hi wnielson (http://www.sencha.com/forum/member.php?17106-wnielson),

I am trying to use the slide navigation in one of our projects. I am facing some issues when displaying aligned text in the list can you suggest how i can achieve this.

This is how i would like to show the list when it is opened.
<Image> <Test> <Count>,

So in the title of each item i am formatting like this


title: '<div class="sncontainer">' +
'<img src="resources/images/Chrysanthemum.jpg" />' + '<div class="item">' + '<span class="lefttext">Big Item Name</span>' + '<span class="righttext">20</span>' + '</div>' + '</div>'CSS:

.sncontainer { display: inline-block; -webkit-box-orient:horizontal; -webkit-box-pack:start; -webkit-box-align:start; width: 100%; height: 32px; img { float:left; width: 32px; height: 32px; -webkit-box-shadow: 2px 2px 2px 2px #88888; } .item { margin-top: 8px; margin-left: 40px; font-family: Arial; font-size: 12px; font-weight: bold; } .lefttext { float: left; } .righttext { float: right; background: #484848; border: 1px solid #888; }}
My Problem is that, as the list is occupying 100% i am not able to see the right aligned text in the list when the menu is opened.

wnielson
20 Dec 2012, 10:11 PM
Hi wnielson (http://www.sencha.com/forum/member.php?17106-wnielson),

I am trying to use the slide navigation in one of our projects. I am facing some issues when displaying aligned text in the list can you suggest how i can achieve this.

This is how i would like to show the list when it is opened.
<Image> <Test> <Count>,

So in the title of each item i am formatting like this


title: '<div class="sncontainer">' +
'<img src="resources/images/Chrysanthemum.jpg" />' + '<div class="item">' + '<span class="lefttext">Big Item Name</span>' + '<span class="righttext">20</span>' + '</div>' + '</div>'CSS:

.sncontainer { display: inline-block; -webkit-box-orient:horizontal; -webkit-box-pack:start; -webkit-box-align:start; width: 100%; height: 32px; img { float:left; width: 32px; height: 32px; -webkit-box-shadow: 2px 2px 2px 2px #88888; } .item { margin-top: 8px; margin-left: 40px; font-family: Arial; font-size: 12px; font-weight: bold; } .lefttext { float: left; } .righttext { float: right; background: #484848; border: 1px solid #888; }}
My Problem is that, as the list is occupying 100% i am not able to see the right aligned text in the list when the menu is opened.

If you target the "x-list-item-inner" element and fix the width you should be able to achieve what you want.

toorshia
24 Dec 2012, 1:53 AM
@koladarci

Take a look at https://github.com/toorshia/jam

Never mind the whole "jam jar" thing, that's just my creative side overreacting :D


@wnielson

I hope you're OK with how I frankensteinized your menu :)
I didn't put any credits yet but I'll make sure you're there.

One question - you've stated it's an MIT license. But as far as I know ST2 is GPL (or is it lGPL) which essentially makes your code GPL, right? Sorry for off-topic, just want to make sure my wires are not crossed...

netlogic
30 Dec 2012, 3:48 AM
I would like to thank Weston for posting his work. This is an excellent example.
I have hacked the code quickly to support a right button so that a right view panel can be hidden and shown. Feel free to cleanup the code. This was just so I could get a proof of concept done.

I modified view.js for the plugin (attached in zip) and in the example main.js (also attached zip) you simply do the following:

Under slideButtonDefaults. Add

rightViewDisplayDefaults : {
selector: 'toolbar'
},


Then if you want a right view display button on the toolbar put in the property after the slideButton property:


slideButton: true,
rightViewDisplay: true,

or you can do something like.

rightViewDisplay: {
iconMask: false,
iconCls: null,
text: 'friends'
},





The last thing for you to do is to support a dynamically created right view. The plugin will call onRightViewDisplayContainerCreated when it has created the container to hold the your right view.

Simply implement a function like the following in main.js attached.


/** give the user a chance to update the container for the right side view
*
* @param container container holding the right view
*/
onRightViewDisplayContainerCreated : function( container ) {
/* add to the container whatever you want */
console.log("create right view");


var panel = Ext.create('Ext.Panel', {
html: 'Simple right panel' ,
height : 20
});
container.setItems( [ panel ] );
}




Also I like to thank everyone for this community support. The premium help forum from sencha pales in comparison to this forum.

ryeo
16 Jan 2013, 9:50 PM
To start off...I want to thank "wnielson" and other contributors for creating and expanding on the menu functionality. I have been tweaking this on and off for a couple of months. One of the things I would like to tweak is to prevent the overdrag when you slide the main container to the right.

ryeo

FYI....just found the solution...set maxDrag...thanks!

rhytha1
26 Jan 2013, 9:46 PM
Thank you for the slider, it works great.=P~

I like to add additional icon to the top bar apart from the "more" button.

I edited by adding more icons list me._slideButtonConfig .



me._slideButtonConfig = {
items:[{
xtype: 'button',
iconMask: true,
iconCls: 'more',
name: 'slidebutton'},{
xtype: 'button',
iconMask: true,
iconCls: 'settings',
name: 'settings'},
],
listeners: {
release: me.toggleContainer,
tap: function(button, e) {
// Need this to stop auto-selecting any component
// hidden beneath the container.
e.preventDefault();
},scope: me
}};

But i am not able to make this work, i am new to senchatouch, so excuse if this is a silly mistake :s

another_i
28 Jan 2013, 12:32 AM
I also have trouble with navigationView and slideNavigation. But I try create slideNavigation component as one of navigationViews. Could anyone help me solve this, please? Code example is here:
https://github.com/wnielson/sencha-SlideNavigation/issues/21
(https://github.com/wnielson/sencha-SlideNavigation/issues/21)

in4p
28 Jan 2013, 5:04 PM
Hey @another_i,

I'm pretty sure what you're encountering with the 'fullscreen' has nothing to do with the sliding navigation code. It has to do with how Sencha handles nesting containers which are trying to lay themselves out.

Can I ask you a better question though? Why are you trying to nest the slide in the navigation view? How are you going to handle two toolbars when you push the view?


I also have trouble with navigationView and slideNavigation. But I try create slideNavigation component as one of navigationViews. Could anyone help me solve this, please? Code example is here:
https://github.com/wnielson/sencha-SlideNavigation/issues/21
(https://github.com/wnielson/sencha-SlideNavigation/issues/21)

ThiemNguyen
28 Jan 2013, 8:09 PM
Hello everyone,
Having a deeper look at the source code, I see that the slide menu extends an Ext.List.
Is it possible to "customize" the sliding menu? I mean I don't want to use basic list. I want to put other components in it (buttons, images,etc.) and want to change screen when click them.
Highly appreciate if you have any ideas. Thanks.

rhytha1
28 Jan 2013, 9:16 PM
You can try to use this, it has menus and other such...this is not by me but by another user who has replied in this thread...

https://github.com/toorshia/jam

another_i
28 Jan 2013, 10:03 PM
Can I ask you a better question though? Why are you trying to nest the slide in the navigation view?


Sure.

I need to create such structure of application:
1. main app NAVIGATION (grouped list, for example) →
2. LIST of items (simple list) →
3. FORM for entity which can include other lists and forms (they are many- and single-end related entities of the opened entity).
In the form I want to use slideNavigation panel for select form for a general thing or forms/lists for the related ones. For now I use TabPanel with bottom scrollable tabBar for this purpouses but it isn't so user friendly such as slideNavigation.
And Ext.navigationView contains of all of this (NAVIGATION, LISTs, FORMs).
If there are other constructively ways of the creating such structure, please let me know.


How are you going to handle two toolbars when you push the view?

Of course I don't want handle two toolbars. And in the best way I want use only navigationView's toolbar. If I open the FORM I want that the navigationView's toolbar can be used in the slideNavigation component and can be slided for viewing FORM's navigation. But in the first time I want run slideNavigation inside Ext.navigationView though. )

Thanks.

wnielson
6 Feb 2013, 4:14 PM
@koladarci

Take a look at https://github.com/toorshia/jam

Never mind the whole "jam jar" thing, that's just my creative side overreacting :D


@wnielson

I hope you're OK with how I frankensteinized your menu :)
I didn't put any credits yet but I'll make sure you're there.

One question - you've stated it's an MIT license. But as far as I know ST2 is GPL (or is it lGPL) which essentially makes your code GPL, right? Sorry for off-topic, just want to make sure my wires are not crossed...

Yeah dude, feel free to modify it as you see fit. As for the license, according to the Sencha licensing terms here (http://www.sencha.com/legal/open-source-faq/open-source-license-exception-for-applications), I'm pretty sure that my code stays MIT. That said I'm not a lawyer and frankly got bored reading that page after the first few paragraphs.

wnielson
6 Feb 2013, 4:19 PM
I would like to thank Weston for posting his work. This is an excellent example.


You're welcome--glad you have found it useful!



I have hacked the code quickly to support a right button so that a right view panel can be hidden and shown. Feel free to cleanup the code. This was just so I could get a proof of concept done.


I haven't looked through all of your changes, but since you have posted this I've added the ability to dock the menu to either the right or left side (thanks largely to a patch submitted by a fellow user). I'm considering adding the ability to have dual menus.

wnielson
6 Feb 2013, 4:27 PM
Thank you for the slider, it works great.=P~

I like to add additional icon to the top bar apart from the "more" button.


If I understand what you are going for, I think you're going about it the wrong way. The plugin doesn't require that you have a toolbar in the main container--if you want one, it is up to you to add it. The ``slideButton`` configuration is there simply to make your life easier if you choose to use a toolbar by adding a button with open/close functionality into your toolbar for you. So, in summary, create a toolbar in your container/panel as you normally would, position the buttons there as you desire and then use the ``slideButton`` config to have the button automatically added.

Hope that helps.

wnielson
6 Feb 2013, 4:30 PM
Hello everyone,
Having a deeper look at the source code, I see that the slide menu extends an Ext.List.
Is it possible to "customize" the sliding menu? I mean I don't want to use basic list. I want to put other components in it (buttons, images,etc.) and want to change screen when click them.
Highly appreciate if you have any ideas. Thanks.

As it is implemented now, this isn't possible. A ``Ext.dataview.List`` is explicitly created, so it isn't possible to change it (at least not easily).

gkatz
13 Feb 2013, 4:14 AM
1st of all thanks for the component.
few question:
1. can caching of views be disabled by config?
2. how should I use this component to achieve the following approach:
every click on the list creates its view dynamically and destroys the last displayed one (for DOM performance)
3. how can I choose the view to be displayed when loading the component? I want item number 6 to be displayed with application startup instead of the first item. tried activeItem property but apparently its not the way
thanks!

wnielson
13 Feb 2013, 10:06 AM
1. can caching of views be disabled by config?

No, not currently. You can, however, manually delete items from the cache by removing them from the ``_cache`` object.



2. how should I use this component to achieve the following approach:
every click on the list creates its view dynamically and destroys the last displayed one (for DOM performance)


I'd do this by listening to the ``select`` event. For example (this is totally untested):



slidenav.on({
select: function(slidenav, newItem, index) {
Ext.Object.each(slidenav.container._cache, function(idx, item) {
if (idx != index) {
delete slidenav.container._cache[idx];
if (Ext.isFunction(item.destroy)) {
item.destroy();
}
}
});
}
});




3. how can I choose the view to be displayed when loading the component? I want item number 6 to be displayed with application startup instead of the first item. tried activeItem property but apparently its not the way


Again, currently there isn't an "easy" way to do this (it's been on the todo list for awhile). The best way currently would probably to make a subclass of the slide view and overload the initialize (https://github.com/wnielson/sencha-SlideNavigation/blob/master/ux/slidenavigation/View.js#L259) function, where you can then manually define ``this.list.select(6)``. Alternatively, you might be able to get away with listening to the ``select`` event on the slide view and checking for the _init (https://github.com/wnielson/sencha-SlideNavigation/blob/master/ux/slidenavigation/View.js#L280) boolean--if it is ``false``, then you can return ``false`` from the listener and select the desired item instead.

Hope that helps.

ingo.hefti
15 Feb 2013, 5:27 AM
No, not currently. You can, however, manually delete items from the cache by removing them from the ``_cache`` object.

I'd do this by listening to the ``select`` event. For example (this is totally untested):


slidenav.on({
select: function(slidenav, newItem, index) {
Ext.Object.each(slidenav.container._cache, function(idx, item) {
if (idx != index) {
delete slidenav.container._cache[idx];
if (Ext.isFunction(item.destroy)) {
item.destroy();
}
}
});
}
});

This seems to do the job! Thanks for the input.

urmilsetia
17 Feb 2013, 1:46 AM
Thanks wnielson, the library is really good!

Just wanted to know, how can I add new container to the SlideOut Navigation at run time.
I added a function to get the instance of the navigation list to change title and stuff on the go.
My requirement is based on application activation, I want to add one more option to the list.

ingo.hefti
17 Feb 2013, 5:53 AM
Just wanted to know, how can I add new container to the SlideOut Navigation at run time. I added a function to get the instance of the navigation list to change title and stuff on the go. My requirement is based on application activation, I want to add one more option to the list.
The driver of the menu is a store. So you will have to manipulate the store to change the shown menu. That shouldn't be to difficult...

urmilsetia
17 Feb 2013, 6:21 AM
The driver of the menu is a store. So you will have to manipulate the store to change the shown menu. That shouldn't be to difficult...

I did that by adding a function to return the instance of list, however simply adding an item to list store won't added a referenced panel, will it?

ingo.hefti
17 Feb 2013, 8:47 AM
I did that by adding a function to return the instance of list, however simply adding an item to list store won't added a referenced panel, will it?
In my understanding it should add the new item to the menu list. Of course if you want to have it open a panel in the container at the same time, then that will require some more efforts.

urmilsetia
17 Feb 2013, 8:52 AM
In my understanding it should add the new item to the menu list. Of course if you want to have it open a panel in the container at the same time, then that will require some more efforts.

Mate, what would be the point of adding any item in the slideOut List, if doesn't show a panel??

ingo.hefti
17 Feb 2013, 8:58 AM
Mate, what would be the point of adding any item in the slideOut List, if doesn't show a panel??Maybe we are not talking about the same thing...? All I'm saying is, that when you add an item to the store, then it should visibly add this item to the menu list. Nothing more, nothing less... Once you tap on the new item, then it will open its panel / container / view...

ingo.hefti
17 Feb 2013, 9:37 AM
I did a quick check to verify: when looking at the code in the view.js then you can find a function addItems(). It is used once the component is instantiated to add your config to the list store. You can use the same function to add more items to the end of the list (maybe not exactly what you want to achieve, but as a POC it might be enough). So this is what I did in one of my controllers:


var nav = this.getSliderMenu();
nav.addItems({
title: 'test xyz',
slideButton: true,
items: [{
xtype: 'panel',
html: 'test panel'
}]
});

And guess what, it adds a new item to the list.

wnielson
17 Feb 2013, 1:20 PM
Yeah,
addItems is undocumented, but it should do what you want.

gkatz
18 Feb 2013, 3:34 AM
@wnielson
(http://www.sencha.com/forum/member.php?17106-wnielson)I (http://www.sencha.com/forum/member.php?17106-wnielson) have noticed that if I comment out this.list.select(0) from the source code of the component. the component stops working. side menu stays open, menu is not clickable nor scrollable.
it seems to me like the component should continue working but display an empty container or something. why is there initialization logic of the component so coupled with the list selection?
thanks

gkatz
18 Feb 2013, 8:23 AM
also; not sure if this was raised already:
if the first item has a handler only (like item 2), the component will not work... which is bad for me because I need an all handler items.
is there a bypass?
thanks

wnielson
18 Feb 2013, 8:47 AM
I have noticed that if I comment out this.list.select(0) from the source code of the component. the component stops working. side menu stays open, menu is not clickable nor scrollable.
it seems to me like the component should continue working but display an empty container or something. why is there initialization logic of the component so coupled with the list selection?
thanks

The list controls which item to display in the main container. Therefore, the component listens to the 'select' event on the list and updates the main container accordingly. If you want to change the default container, don't comment out "this.list.select(0)", but instead change it to select a different component--there needs to be a default component to render. It is for this reason that the default item cannot be one that is a handler (function call) only. The work around is to change 'this.list.select(0)' to select whatever component you want to be the default.

Hope that helps.

urmilsetia
19 Feb 2013, 4:52 AM
Yeah,
addItems is undocumented, but it should do what you want.

wnielson, I did exactly that! ;) however it said private method.

Also how to remove it?
What I am doing is removing the item from the list store and then destroying the panel by the id which I passed when adding it.

wnielson
20 Feb 2013, 4:20 PM
wnielson, I did exactly that! ;) however it said private method.

Also how to remove it?
What I am doing is removing the item from the list store and then destroying the panel by the id which I passed when adding it.

See this post (http://www.sencha.com/forum/showthread.php?173990-Sliding-Side-Menu&p=938380&viewfull=1#post938380).

urmilsetia
23 Feb 2013, 6:26 AM
Hi wnielson,

I have 2 question for you.

1. The Swipe event to slide-Out the navigation, doesn't work on Android?

2. It takes lot of time to render the whole component, to work around it I start a busy Indicator before adding it to the viewport and stop this busy indicator in view.js "initialize" function, still I don't see busy indicator loading it while it renders, What could I be doing wrong here. PS: Busy Indicator works otherwise.:)

Appreciate the effort.

wnielson
23 Feb 2013, 8:05 AM
1. The Swipe event to slide-Out the navigation, doesn't work on Android?


I'm unaware that it doesn't work on Android. I've tested the component on various version of Android, but only in the simulator as I don't own any actual Android hardware. I'd love to have someone as an Android tester though.



2. It takes lot of time to render the whole component, to work around it I start a busy Indicator before adding it to the viewport and stop this busy indicator in view.js "initialize" function, still I don't see busy indicator loading it while it renders, What could I be doing wrong here. PS: Busy Indicator works otherwise.:)


Perhaps this is an Android and/or hardware issue? On my 2+ year old iPhone 4 the component loads very quickly and on more recent hardware it is even better.

If you'd like to help debug these issues, I'd welcome a patch.

in4p
23 Feb 2013, 5:17 PM
I'm unaware that it doesn't work on Android. I've tested the component on various version of Android, but only in the simulator as I don't own any actual Android hardware. I'd love to have someone as an Android tester though.

I have the swipe event to slide-out working on an Android phone (v 2.4.3).



Perhaps this is an Android and/or hardware issue? On my 2+ year old iPhone 4 the component loads very quickly and on more recent hardware it is even better.

To render the load view, try delaying the loading view (or the slider) with Ext.util.DelayedTask. Not sure why, but I found that if a second visual component begins to be rendered before the first component (in this case the loading view) is finished being rendered on screen, it will simply not render the first item.

urmilsetia
24 Feb 2013, 1:13 AM
I have the swipe event to slide-out working on an Android phone (v 2.4.3).

Hey, did you do anything special for it?


To render the load view, try delaying the loading view (or the slider) with Ext.util.DelayedTask. Not sure why, but I found that if a second visual component begins to be rendered before the first component (in this case the loading view) is finished being rendered on screen, it will simply not render the first item.

You have some working code? Please share

urmilsetia
24 Feb 2013, 1:15 AM
Perhaps this is an Android and/or hardware issue? On my 2+ year old iPhone 4 the component loads very quickly and on more recent hardware it is even better.

If you'd like to help debug these issues, I'd welcome a patch.

It seems to do something with loading of content.

Because I am loading 4 heavy panels.

wnielson
24 Feb 2013, 11:20 AM
It seems to do something with loading of content.

Because I am loading 4 heavy panels.

Are you loading all four panels at once? The component utilizes delayed loading, by default, in an effort to reduce the initial load time as much as possible. Not sure how else to help without more details and/or some code samples.

hotdp
4 Mar 2013, 1:39 AM
I haven't looked through all of your changes, but since you have posted this I've added the ability to dock the menu to either the right or left side (thanks largely to a patch submitted by a fellow user). I'm considering adding the ability to have dual menus.
This would be awesome! Any ETA? :-)

wnielson
5 Mar 2013, 8:26 AM
This would be awesome! Any ETA? :-)

If you're willing to use an early development version, you can check out the newer Ext.ux.slide.View (http://www.sencha.com/forum/showthread.php?257228-Ext.ux.slide.View). The navigation aspect has been completely decoupled from this version, which makes it possible to dock any components you want to the left and/or right at the same time.

hotdp
5 Mar 2013, 8:54 AM
Thanks, I will have a look.
I have another question:
The orginal Facebook application functions like each "tab" is a NavigationView. What I mean is that you can go in depth with one function, switch to another and back and stille be the same place.
I know that a multiple Containers with layout "card" will do the same. But NavigationView has some nice build in functions as the animations in the toolbar and the autoDetroy of items.
Have someone implemented this or have an idea on have to solve it?

wnielson
5 Mar 2013, 9:02 AM
Thanks, I will have a look.
I have another question:
The orginal Facebook application functions like each "tab" is a NavigationView. What I mean is that you can go in depth with one function, switch to another and back and stille be the same place.
I know that a multiple Containers with layout "card" will do the same. But NavigationView has some nice build in functions as the animations in the toolbar and the autoDetroy of items.
Have someone implemented this or have an idea on have to solve it?

You should be able to achieve this by using an Ext.navigation.View for each item in the slidenavigation list. I've implemented this in some of my apps and it works great.

hotdp
5 Mar 2013, 9:52 AM
Hmm but hen you change what navigation view is active will it not "flicker"? Also will you add the same buttons to all navigationBars?

wnielson
5 Mar 2013, 10:15 AM
Hmm but hen you change what navigation view is active will it not "flicker"? Also will you add the same buttons to all navigationBars?

Yes, there will be a slight "flicker" the first time a new navigation.View is added to the container, but this is already the case for any component. Once it is initially rendered though, it is cached, so "flickering" when activating that item at a later time till be significantly reduced.

As for the 'slidebutton', the way that I implement this in my own apps is similar to the FB app--on the "root" view of any navigation.View, the 'slidebutton' is visible, but on children views it isn't. The slidenavigation component doesn't have support for this built in, because it too specific, but adding the functionality on your own is fairly trivial. Consider the following listeners (untested) on a navigation.View inside of a slidenavigation:



back: function(nav) {
if (nav.getInnerItems().length == 2) {
bar = nav.getNavigationBar();
bar.down('button[name="slidebutton"]').show({
type: 'fade',
out: false,
duration: bar.getAnimation().duration
});
}
},
push: function(nav) {
var bar = nav.getNavigationBar();
bar.down('button[name="slidebutton"]').hide({
type: 'fade',
out: true,
duration: bar.getAnimation().duration
});
}

hotdp
5 Mar 2013, 11:20 PM
Thank you for the answer,
Do you have an URL for a application that has this implementation?

wnielson
6 Mar 2013, 2:44 PM
Thank you for the answer,
Do you have an URL for a application that has this implementation?


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 feel like, check out the video:


https://vimeo.com/61218996

joostvanhassel
21 Mar 2013, 10:08 AM
Awesome work wnielson!

Has anyone tried to get this to work within Sencha Architect? It would be great to be able to use this from the IDE! Will have a look myself at getting this to work, but I'm not that experienced with overriding components in SA (yet :)).

hotdp
21 Mar 2013, 10:28 AM
Awesome work wnielson!

Has anyone tried to get this to work within Sencha Architect? It would be great to be able to use this from the IDE! Will have a look myself at getting this to work, but I'm not that experienced with overriding components in SA (yet :)).

Hi,
I have successfully added it to my SA project.
But it is as an external file because I wanted to be able to update it easily when there is updates.
This would be more work if it was an SA component.

joostvanhassel
22 Mar 2013, 6:49 AM
Hi,
I have successfully added it to my SA project.
But it is as an external file because I wanted to be able to update it easily when there is updates.
This would be more work if it was an SA component.

Sounds like a solution that would work great for me too! How did you do this exactly? What file(s) did you reference and how did you extend your container in Sencha Architect from Ext.ux.slide.View?

kholy
22 Mar 2013, 7:07 AM
Hi
I am running version 0.2.2-dev and currently whenever i select a new category it changes the top toolbar, however id like to be able to get the menu icon/button to always be on a toolbar at the top that doesnt go away whenever you select a new menu item (this way i can have mobile app logo at top) is this possible? or easy to do?

PS. sorry if it was already answered 20 pages isnt the easiest to filter through

hitman01
4 Apr 2013, 11:36 AM
Amazing plugin.

I love how you can slide the menu from anywhere, however in some cases I have a carousel component which obviously conflicts with the sliding menu.

I was wondering if there was a simple way to disable the swipe listener for some particular components such as the carousel? Unless there is a different workaround?

Pulp Fiction
9 May 2013, 12:26 AM
Hi, I have tried to insert the elements also in the rightContainer, but it forms a contention. In the Main view there is the part where I declare xclass and there I put all the view that interest me. Then when I declare the left and right Container the listener can not distinguish because it always starts from the first element. I do not know how to do.


Ext.define('SVE.view.Main', {
extend: 'Ext.ux.slide.View',
xtype: 'main',

requires: [
'Ext.dataview.List',
'Ext.field.Search',
'Ext.data.Store'
],

views: [
'Home',
],

config: {
slideDuration: 500,

shadowStyle: '0 0 2px 1px rgba(30,36,47,0.3)',

container: {
items: [{
xclass: 'SVE.view.Home',
},{
xclass: 'SVE.view.Politica',
},{
xclass: 'SVE.view.Cronaca',
},{
........Some classes
}]
},

leftContainer: {
xtype: 'list',
width: 250,
cls: 'fb x-slideview-container-left',
data: [{
name: 'Articoli'
},{
name: 'Eventi'
},{
name: 'Farmacia'
}],
itemTpl: '{name}',
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'fb-dark',
items: [{
xtype: 'searchfield',
width: 225
}]
}],
listeners: {
itemtap: function(list, index) {
var slideview = list.getParent(),
container = slideview.getContainer();

container.setActiveItem(index);
Ext.defer(slideview.closeContainer, 200, slideview);
},
initialize: function(list) {
list.select(0);
}
}
},

rightContainer: {
xtype: 'list',
width: 250,
cls: 'fb x-slideview-container-right',
data: [{
name: 'Politica'
},{
name: 'Cronaca'
},{
.........there the element that recall the other classes
}],
itemTpl: '{name}',
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'fb-dark',
items: [{
xtype: 'searchfield',
width: 175
},{
xtype: 'button',
iconMask: true,
iconCls: 'settings'
}]
}],

listeners: {
itemtap: function(list, index) {
var slideview = list.getParent(),
container = slideview.getContainer();

container.setActiveItem(index);
Ext.defer(slideview.closeContainer, 200, slideview);
},
initialize: function(list) {
list.select(0);
}
}
}
}
});

tejas178
14 May 2013, 10:38 PM
Can anyone give me solution how to use list container two times. I want it to use on both side left side and right side on my window with different list Item. I am new to sencha touch so please provide me easy understanding example of it.

digeridoopoo
14 May 2013, 11:28 PM
There are many examples of this sliding menu for sencha all over the web. The best way of learning is by studying the examples, some are even step-by-step on forums instead of getting someone else to do it for you. you will become a better developer if you are patient and study yourself.

Google 'sencha sliding side menu'

shepsii
16 May 2013, 2:30 AM
There are many examples of this sliding menu for sencha all over the web. The best way of learning is by studying the examples, some are even step-by-step on forums instead of getting someone else to do it for you. you will become a better developer if you are patient and study yourself.

Google 'sencha sliding side menu'

I couldn't agree with this more.

If you are used to developing with jQuery and have developed the attitude of "I'll just find a plugin and paste it in" that's not going to fly with Sencha Touch. You need to understand what's happening with each line of code or sooner or later you'll find a performance issue you can't sort.

Pulp Fiction
10 Jan 2014, 4:37 AM
It's possible to stop the sliding effect when they are in a view for detail?

gkatz
12 Jan 2014, 12:34 AM
Hey @Pulp.
after sencha introduced the Ext.Menu there is no reason to use the components mentioned in this thread.
just use ST2.3.x's Ext.Menu

MonkeySleeve
13 Jan 2014, 3:31 AM
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.
47560

amkungx
12 Feb 2014, 12:12 AM
Hi everyone,
How can i put the list in the left menu ?

Thank you :)

Pulp Fiction
12 Feb 2014, 12:56 AM
What kind of Slide Navigation Menu are you using? Please link a reference file. Is the .js files in the ux folder.

gkatz
12 Feb 2014, 1:39 AM
you can look at sencha's touch tomatos demo app source code...
I assume you will find your answers there...

amkungx
12 Feb 2014, 11:20 AM
I got the solution now.
Thanks for everyone :) , i decided to use 'toggle left menu' from this example
http://cdn.sencha.com/touch/sencha-touch-2.3.1a/built-examples/kitchensink/index.html#demo/menus

FatihBekdemir
15 Feb 2014, 12:45 PM
Hi friends,

I'm looking all the comments but i still couldnt find a solution for real "facebook like" sliding menu. What i need is, the menu should be open when i slide left to right. Like facebook app. In my current app settings, if i want to open the menu, i have to use the menu button. In wnielson example, he managed that swiping the toolbar is opening the menu. But i am looking for a solution the way to open the menu with just tapping in the middle of the screen swipping left to right. Just like facebook did.

biggbest
15 Feb 2014, 3:04 PM
Hi FatihBekdemir,

I recommend you to use the native Menu xtype introduced in Sencha Touch 2.3.0 (Ext.Menu (http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Menu)).

I also created a short Fiddle to demonstrate how easy it is. Of course if you go for this method you will have to add a bit of css (to remove the menu padding f.e.).

https://fiddle.sencha.com/#fiddle/3lo

FatihBekdemir
16 Feb 2014, 1:58 AM
Hi biggbest,Your apps works good in Cupertino Theme, but not in Sencha Touch theme i guess, am i right ?Secondly, you almost solved my problem with the code below but how did you implement 'swipe' under the 'listeners'. Did you use delegate event binding ? And what is 'event' in the params ? Is it catching your swipe movent from left to right ?

swipe: {
element: 'element',
fn: function(event, node, options, eOpts) {
if (event.direction == 'right') {
Ext.Viewport.showMenu('left');
}
else {
Ext.Viewport.hideMenu('left'); }
} }

biggbest
16 Feb 2014, 2:21 AM
Hi FatihBekdemir :-)

It does work with Sencha Touch base theme too (and all other themes), it wasn't looking good with ST base theme because it doesn't have a default menu width (Cupertino theme does have this default set to 220).

I updated the fiddle with the default theme and I added the width property.
https://fiddle.sencha.com/#fiddle/3lo

Regarding the event listener, yes it's a delegate event binding, defining the element property of the listener to "element" bind the event on the component.
You can take a look the Swipe event (http://docs.sencha.com/touch/2.3.1/#!/api/Ext.dom.Element-event-swipe) in the documentation, as often there is an event param. From it I just check the swipe direction to toggle or not the menu :-)

scott.finkel
19 Mar 2014, 4:20 PM
Instead of declaring sideMenu in a var in the app.js launch function, I'd like to follow the pattern of declaring my app's menu in it's own class in the view directory, via


Ext.define('Appname.view.sideMenu', {
extend: 'Ext.Menu',
xtype: 'sMenu',
layout: 'fit',
items []
...

It would seem I'm unable to include this class by xtype reference back in the app.js launch function.


var sideMenu = {

xtype: 'sMenu'

};


Ext.Viewport.setMenu(sideMenu, {

side: 'right',

reveal: true

});

Should this work? (indicating something else is awry) Or is there another method to include a menu from an externalized view class?

I do have the appropriate views: ['sideMenu'] declaration in app.js.

biggbest
20 Mar 2014, 12:43 AM
Hi scrott.finkel !

Of course you must follow an MVC structure to keep the app clean, the way I declared was just to demonstrate the use of the native Menu.

Regarding your issue, first thing first, I recommend you to capitalize components names. In your case you should have the following:

A file called SideMenu.js in your view directory
The same name in the view declaration:
Ext.define('Appname.view.SideMenu', { ... });
Finally, the name of the view in the app.js views array:
views: [ 'SideMenu', '...', '...' ]
Another thing, I usually define xtypes with the same name of the component in lowercase (xtype: 'sidemenu').

I hope it will help you :-)

jakeed2
10 Apr 2014, 10:54 AM
Just in case anyone interested:

I have implemented a version here: https://github.com/jforaker/ST2-SlideNavigation

The Main container holds a navigation view while maintaining ONE main toolbar on top. When a view is pushed, the menu button disappears. When "back" is pressed, the menu button reappears.

Also, the old view is removed - as suggested many here.

paigemcandrew
14 Oct 2014, 9:45 AM
I haven't been able to use the iconCls with the Sliding Side Menu. Is there a setting besides iconMask: true?

I know it's a container with items but can't you set icons to the items?

I've tried the iconPath an it just doesn't work as well.

digeridoopoo
14 Oct 2014, 10:35 PM
I did use Ext.Menu at first as the code seemed more efficient, but I notice on an iPhone 4 the first time the button is tapped the animation is not smooth enough. It's fine on second tap.

It would be great if Sencha updated Ext.Menu to use hardware CSS transforms if available...I don't think they are being used, either that or there is a small bug on first tap (I noticed it even in the kitchen sink demo on an iPhone 4). That's why I am using the Bruno Tavares side menu for now, the animation is much smoother. Anyway, this is the code I'm using to have an icon in my sidemenu:


{
xtype: 'list',
baseCls: 'lefthandlistitem',
height: '100%',
itemId: 'myList',
top: 0,
width: 266,
zIndex: 5000,
itemCls: 'lefthandlistitem',
itemTpl: [
'<span class="icon {iconCls}"></span><div class="sidemenutext">{name}</div>'
],
pressedCls: 'lefthandlistpressed',
store: 'SideMenuStore'
}

:-)

paigemcandrew
15 Oct 2014, 6:20 AM
Thanks for the response but we are no looking to switch the navigation tools just yet. We might to that later but currently we are looking to use the iconCls in the current tool if it's possible.

digeridoopoo
15 Oct 2014, 10:26 AM
No worries, that code should still work for Ext.Menu. This is how I did it using Ext.Menu:


onContainerInitialize: function(component, eOpts) {

Ext.fly('appLoadingIndicator').destroy();

var sideMenu = Ext.create('Ext.Menu', {
layout: 'fit',
width: 220,
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Side Menu',
height: 80
}, {
xtype: 'list',
itemTpl:['<span class="icon {iconCls}"></span><div class="sidemenutext">{title}</div>'
],
data: [{
title: 'Menu item 1',
iconCls: 'icon1'
}, {
title: 'Menu item 2',
iconCls: 'icon2'
},
{
title: 'Menu item 3',
iconCls: 'icon3'
}, {
title: 'Menu item 4',
iconCls: 'icon4'
}]
}]
});


// Add side menu to viewport
Ext.Viewport.setMenu(sideMenu, {
side: 'left',
reveal: true
});


If anyone know hows to fix the slowness on the initial open action using Ext.Menu then please post the solution here (probably only noticeable on lower spec phones such as the iPhone 4, it's a little sluggish), as I expect using Ext.Menu uses much less code than any of the other side menus.

:-)