Adding the Slide Navigation Plugin to Architect

[meander365]

I want to use wnielson's Slide Navigation (https://github.com/wnielson/sencha-SlideNavigation) from within Architect.

From what I can gather, I would need to include this as a resource and define an override on a container.

I think this is correct, but would like to know if it is and what I would need to add to the override.

Thanks!

[primitive_type]

I'm in exactly the same boat. I would love to see some documentation on using the SlideNavigation plugin with Sencha Architect. The documentation at https://github.com/wnielson/sencha-SlideNavigation says to edit the app.js file, but that isn't really an option when using Architect. Is there a better way to do this?

Thanks! SlideNavigation is a perfect plugin for what I am trying to do with Sencha right now.

[meander365]

I've got this this working in Architect. It's a little fiddly but it works.

So first off I set a Loader to set the paths to ./ux as set out in the docs. So in Architect thats Application > Loader > paths > {"Ext.ux":"./ux"}

Then I setup the view(s) you want to display as an item(s) within the navigation list. I setup an onInit for those and set the following :

this.slideButton = {selector: 'toolbar'}; //etc
this.title = "My View Name"; //etc

Then I created a Main view and set this as the initial View. Save, exit Architect and the go locate app/view/Main.js and replace the code with the following:

 Ext.define("MyApp.view.Main", {
    alias: 'widget.Main',   
    extend: 'Ext.ux.slidenavigation.View',
    
    initialize : function() {
      
     //add all your views here - maybe store all views in an array and loop.


      var MyView = Ext.create('myApp.view.MyView');
      this.addItems(MyView);      
      this.callParent();
      
    },
    
    requires: [
        'Ext.Container',
        'Ext.MessageBox',
        'Ext.Panel',
        'Ext.Toolbar',
        'Ext.event.publisher.Dom'
    ],


    config: {
        fullscreen:true,
        slideSelector: 'x-toolbar',
        selectSlideDuration: 150,
        list: {
            maxDrag: 262,
            width: 260,
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                ui: 'light',                    
                title: {
                    title: 'Navigation',
                    centered: false,
                    width: 200,
                    left: 0
                },
            }]   
        },
        
        defaults: {
            style: 'background: #fff',
            xtype: 'container'
        }
    }
});

That's it. The only downside to this approach that every time you save in Architect you'll need to copy an paste the code over Main.js - which is annoying.

I'm working on not having to do this, but if anyone has any ideas? Let me know...

[primitive_type]

Great! I'm going to try this as well. Do you, by chance, know if this could work with a navigation view? That's what I'm currently using for navigation in my app, but I just wanted this slide navigation to work on top of that.

Nice work on figuring this out!

Thanks.

[hotdp]

This must be possible to use with an override. I have just not played that much with overrides in SA yet.
Can someone create a demo project with this plugin and SA?

[gizmoone]

Can i have a example files/package with architect 2 with slide Navigation plugin
because i'm beginner with( architect and sencha touch) and i'm stopped for this central point.
thanks,

[meander365]

I ended up coding my own super simple slide navigation for use with archtiect. There is no swipe support (yet), but I can show and hide a side navigation panel - just as SlideNavigation does - by tapping a button. This works for me.

Plus, when I packaged the original slideNavigation plugin with a test app - for use with PhoneGap - the animation of sliding the nav in and out - on the iPhone at least - was unacceptable. I found that keyframe animations had the best result; so this is what I ended up using.

Here's an basic example for architect:
https://dl.dropbox.com/u/3574740/basic-slide.zip

Pretty simple setup : Master View with Navigation and Main children containers, each having there own content containers. You could change the navigation container to a list view, iterate over an array of all those views you want to have and list them out. Then its a question of just creating the chosen view on itemtap and setting it as the active item in Main. I guess you could optionally destroy the active view on selection of a new item.

[403]

Hello, would you be able to share an example of MyView containing the items within the navigation list? I am interested in connecting the items to a store so that I can refresh them - many thanks for posting your solution to the forum

[coolfish]

For either example, I'm not sure how to use my existing views/panels and have the display properly when either added to the "main" container, or integrate them with the sencha-SlideNavigation code. My views are generally quite complicated, so I'm not sure what's the best approach to toggling them through either sliding menu? Appreciate any feedback!

[andy370]

Ok guys, I got it working. Here's what I did (BTW, I used meander365 instructions as a starting point, so thanks!).

1. Copy the plugin ("ux\sidenavigation\*") to a folder in your project. I have it set up like this:
   "MyApp\app\plugins\ux\sidenavigation\View.js"
2. Set a Loader to set the paths to ./ux as set out in the docs. So in Architect thats Application > Loader > paths > {"Ext.ux":"app/plugins/ux"}
3. Create your main view in a text editor ("view\Main_View.js" in my case) using the demo as an example.
4. Edit the items in Main_View.js:
   1. For a regular view, you will need to add a toolbar and use it as the selector
      

              {
                  title: 'Home',
                  slideButton: {
                      selector: 'toolbar'
                  },
                  items: [{
                      xtype: 'toolbar',
                      title: 'Home',
                      docked: 'top'
                  },{
                      xtype: 'Home_View'
                  }]
              }

   2. If it's an "Ext.navigation.View", it already has a toolbar so don't create one, but do reference it as a titlebar
      

              {
                  title: 'Home (Nav)',
                  slideButton: {
                      selector: 'titlebar'
                  },
                  items: [{
                      xtype: 'Home_NavView'
                  }]
              }

5. Since Main_View isn't in your project, but the file actually exists, you can reference it in your application:
   Application > views > "Main_View" (Manually add it here since it's not in the dropdown)
6. Now all we need to do is make our Main_View the initial view.
   1. Make sure none of your views are set as the initial view
   2. Go to "Application > launch" function and edit it. Add this line at the end to make the view load fullscreen:
      

      Ext.create('MyApp.view.Main_View', {fullscreen: true});

7. You can now save your app and it will work. Only setback is that editing of Main_View.js has to be done in a text editor instead of Architect.