1. #211
    Sencha User
    Join Date
    Dec 2013
    Location
    Turkey
    Posts
    26
    Vote Rating
    -1
    FatihBekdemir is an unknown quantity at this point

      0  

    Default


    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.

  2. #212
    Sencha User biggbest's Avatar
    Join Date
    Jun 2011
    Location
    France
    Posts
    38
    Vote Rating
    5
    biggbest is on a distinguished road

      0  

    Default


    Hi FatihBekdemir,

    I recommend you to use the native Menu xtype introduced in Sencha Touch 2.3.0 (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

  3. #213
    Sencha User
    Join Date
    Dec 2013
    Location
    Turkey
    Posts
    26
    Vote Rating
    -1
    FatihBekdemir is an unknown quantity at this point

      0  

    Default


    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'); }
    } }

  4. #214
    Sencha User biggbest's Avatar
    Join Date
    Jun 2011
    Location
    France
    Posts
    38
    Vote Rating
    5
    biggbest is on a distinguished road

      0  

    Default


    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 in the documentation, as often there is an event param. From it I just check the swipe direction to toggle or not the menu :-)

  5. #215
    Sencha User
    Join Date
    Nov 2011
    Location
    San Diego, CA
    Posts
    1
    Vote Rating
    0
    scott.finkel is on a distinguished road

      0  

    Default Externalized menu class?

    Externalized menu class?


    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
    Code:
    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.
    Code:
    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.

  6. #216
    Sencha User biggbest's Avatar
    Join Date
    Jun 2011
    Location
    France
    Posts
    38
    Vote Rating
    5
    biggbest is on a distinguished road

      0  

    Default


    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:
      Code:
      Ext.define('Appname.view.SideMenu', { ... });
    • Finally, the name of the view in the app.js views array:
      Code:
      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 :-)

  7. #217
    Sencha User
    Join Date
    Oct 2012
    Posts
    8
    Vote Rating
    0
    jakeed2 is on a distinguished road

      0  

    Default


    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.

  8. #218
    Sencha User
    Join Date
    Oct 2014
    Posts
    3
    Vote Rating
    0
    paigemcandrew is on a distinguished road

      0  

    Default IconCls picto icons

    IconCls picto icons


    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.

  9. #219
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default In mine...

    In mine...


    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:

    Code:
    {
                    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'
                }
    :-)

  10. #220
    Sencha User
    Join Date
    Oct 2014
    Posts
    3
    Vote Rating
    0
    paigemcandrew is on a distinguished road

      0  

    Default IconCLS for sidenav

    IconCLS for sidenav


    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.