Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    46
    Vote Rating
    8
    meander365 is on a distinguished road

      2  

    Default Adding the Slide Navigation Plugin to Architect

    Adding the Slide Navigation Plugin to Architect


    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!

  2. #2
    Sencha User
    Join Date
    Jun 2012
    Posts
    5
    Vote Rating
    2
    primitive_type is on a distinguished road

      0  

    Default


    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.
    Last edited by primitive_type; 21 Jun 2012 at 6:33 AM. Reason: grammatical

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    46
    Vote Rating
    8
    meander365 is on a distinguished road

      1  

    Default


    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 :

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

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

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    5
    Vote Rating
    2
    primitive_type is on a distinguished road

      0  

    Default


    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.

  5. #5
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


    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?

  6. #6
    Sencha User
    Join Date
    Jun 2012
    Location
    N/A
    Posts
    18
    Vote Rating
    -1
    gizmoone is an unknown quantity at this point

      0  

    Default


    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,

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    16
    Vote Rating
    1
    403 is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    153
    Vote Rating
    3
    coolfish is on a distinguished road

      0  

    Default


    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!

  9. #9
    Sencha User andy370's Avatar
    Join Date
    Jul 2012
    Posts
    13
    Vote Rating
    1
    andy370 is on a distinguished road

      1  

    Default Using the plugin

    Using the plugin


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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar