Video Tutorial: How to Make a Sliding Menu in Sencha Touch

Video Transcript

Hello everyone and welcome to another SenchaTouch tutorial. In this video I'm going to look at how to create a sliding menu in Sencha Touch. This is a pretty popular thing to do these days. I'm not sure if Facebook were the first people to do it but they've certainly made it very popular. I tend to use it a lot in my applications; you save a lot of screen real estate by not have the extra tab bars permanently down the bottom. You can pop out the menu whenever you like to go to different views or whatever you want to do in there. I find it a really useful thing to do.

So, I'm going to show you how to create exactly what you are seeing on the screen here from scratch. I'll start off with generating a new Sencha Touch application. I'll open up the command prompt. You probably know how to generate an application by now but if you don't, check out the first video tutorial I made. That'll show you how to generate a new Sencha Touch application. Now I'm going to go into the touch directory… generating a new app. I'll put the code up on GitHub afterwards; I'll have a link to that in the description of the video or in the blog post. You can have a look at that and copy bits and pieces from it if you need to.

Now that has finished generating, I'm going to open it up in my text editor. This is the default application that Sencha Touch generates. I've shown you all this before but let me just open that up again and have a look at where we are starting from. This is the default application; this is exactly how it appears as soon as you generate the application. Now I'm going to open up the application in here again. What we are going to do to start off with is open up the main view and clear out a few things in here. I'm going to want to change this to 'container'. It requires the 'Ext.Menu' class. This comes with Sencha Touch by default which makes it a lot easier to implement a menu than it used to be.

What I'm going to do is first create that tool bar that's at the top of the application that actually holds the button that will be clicked to toggle the menu in and out. To do that, I'm going to create a tool bar by using:

xtype: 'toolbar'

We are going to use:

docked: 'top'

to make it stick to the top of the application. We'll give it a title of 'Sliding Menu'. Now we want to add the button that we'll click to show the menu. For now we'll add some text; we'll just say 'M' for menu. We'll change this later to put the actual icon in. A handler function will handle toggling the menu from being visible and nonvisible.
We want to say, 'if the menu is hidden' – so we are look for the left menu, you can stick the menu to the left, the right, the top or the bottom. For this example, go with the left. – 'if it's hidden we want to show the menu when that button is tapped. Otherwise we want to hide the menu.'

We are also going to have to put an initialize listener on here as well. Basically, we just want to create this menu once the view is initialised. We're using this set menu function and we are going to be calling 'this.createMenu()'and this is a function that we're going to create in a second. Again, we want it to be on the left side. Now we'll create that create menu function. We're going to define the items that we want the menu to hold. Basically, the two that I showed you before is just two buttons (you can put anything you like in there) but buttons tend to work pretty well just for a normal sort of menu. So, we want to do:

xtype: 'button'

we'll just call is button1. And we'll throw in another one and call it button2.

Now we want to create that menu so we'll use 'Ext.create' when we want to create a menu. We want to pass in the following config options here. We can control how wide we want that to be so I'm just going to go with 200 which seem to work pretty well. The scrollable config says basically whether we want the user to be able to drag the menu up or down. If you do have more items in the menu than will actually fit in the screen comfortably, you can set it to scrollable so they can scroll that menu up and down to show more of the items and of course we want to set the items to the items that we just created.

At this point, hopefully we should have something going on in our application so let's give it a refresh. So we have our button there with the 'M' on it to toggle the menu in and out and it looks like I do have an error somewhere in here. Let's see if I can find it.

(Unfortunate debugging interlude)

I found out what was going wrong there. It's difficult trying to record a video and debug at the same time, there is so much pressure! I had a couple of typos here. We want listeners and I wrote intitialize instead on initialize. A lot of you probably saw that and got really annoyed by that so I apologise for the minor disruption there. So, we'll save that and hopefully now we can see our sliding menu actually work. So it slides in and out now.
What we want to do now is to make it look just a little bit nicer. What I'm going to do is just back into here again and open up:

resources/sass/app.scss

This is where we can make changes to the style sheet of our application. What this .scss file allows us to do is to create some rules in here which gives us a little bit more power than plain CSS normally does and then from that a normal .css file is generated. To make sure everything goes as we would like it to, we have to make sure compass is running to generate the .css file. What you want to do here is go into the directory of your application that you created, go to the resources/sass folder and run the 'compass watch' command. Make sure that comes up and in a second it should say it's polling for changes. Now any time we make a change to that file it's going to see that a change has been made and it's automatically going to regenerate the .css file. Just to show you, this is the css file so you can see it's a minimised version.

Now I'm going to add a couple of styles in here and also I'm going to include the list icon. Sencha Touch only has a few icons included by default so what we can do is say:

@include icon('list');

and that gives us the three bar icon that is typically used for sliding menus. As well as that we are also going to create a style for our menu buttons. So we've got a class called 'menu-button' with: 'background: none', 'border: none' and give it a margin of 0 pixels and I'm also going to align the label which is within that button. I'm going to align that to the left using 'text-align: left' on that class. Now when I save this this it's going to detect the change. It should regenerate the .css file. Now that new file is ready to go, but before we do we want to add those classes to our buttons. So, I'm going to change this now so it has the list icon, so we use:

iconCls: 'list'

As well as that I'm going to set the 'ui' to plain and you will see what that does in a second but essentially buttons usually have this background around them. Setting it plain means that rather than looking like a button that can be pushed and indented, it's just a simple flat icon and when you click on it there is a glow effect to indicate that it has been tapped.

Now just come down to the buttons here. Let's say, we want an icon class… just for fun let's put in 'user' here – that has the little person icon. Then we want to set the class of the button to the class we just created which is 'menu-button'. I'll do the same for the other one as well. Now if we jump back into here again and refresh. You can see there that we have the plain UI now instead of the default one and we've got the list icon and we can open that up and see our button is in there.

So obviously, you'd want to style this a bit more, you can make the buttons look however you like, however simple or complex you like by adding more rules to that .scss file and then we can also hook up some handler functions for these buttons too which is quite simple to do so that when we click it, it closes this menu and launches a new view.

So that's pretty much it for this tutorial, I'll put this code on GitHub, I'll link it below so you can take a look. I hope you enjoyed it. As always, if you have any questions feel free to leave a comment and I will try and get back to you. I'll see you next time.