1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    San Antonio, TX
    Posts
    93
    Answers
    4
    Vote Rating
    0
    jnotti is on a distinguished road

      0  

    Question Answered: MVC Profiles & Orientation Change

    Answered: MVC Profiles & Orientation Change


    I have a split-view app and I want to hide the left nav in portrait and make it accessible from a button in the toolbar. Just like the ST1 profiles example, except in MVC.

    I might be missing something but I can't seem to find a decent example of using profiles and orientationchange together within MVC. The ST2 kitchen sink implements profiles but it doesn't (at least from what I can tell) use orientationchange to hide/show components.

    So from this point on, I'm not sure how to implement the hide/show approach in MVC.
    Would I setup a ref and control in the controller to handle the hide/show/placement of items or should I include that logic in the view that I have the orientation change listener on?

    There should be an updated guide or example in the docs. I'd even be happy to provide my code but for now I just need some direction! Thanks!

    Code:
    Ext.define('App.view.tablet.ProductLanding', {
        extend: 'Ext.Panel',
        alias: 'widget.productLanding',
        
        config: {
            layout: 'hbox',
            title: 'Products',
            iconCls: 'home',
            items:[
                {
                    xtype: 'productNavigationView',
                    flex: 1
                },
                {
                    xtype: 'productDetailContainer',
                    flex: 2
                }
            ]
        },
        initialize: function(){
            Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, {buffer: 50});
            this.callParent(arguments);
        },
        handleOrientationChange: function(viewport, orientation, width, height){
            var realOrientation = Ext.Viewport.determineOrientation();
            //how do I target productNavigationView and make accessible from anothercomponent?
                    //should I setup a ref/control to handle that logic?
        }
    
    
    });

  2. Ext.Viewport fires an orientationchange event. You can use the xtype viewport in your controller to listen to Ext.Viewport.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Ext.Viewport fires an orientationchange event. You can use the xtype viewport in your controller to listen to Ext.Viewport.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    San Antonio, TX
    Posts
    93
    Answers
    4
    Vote Rating
    0
    jnotti is on a distinguished road

      0  

    Smile


    So, that was too easy, idk why the below didn't click for me but thank you Mitch!

    Code:
    Ext.define('App.controller.tablet.Main', {
        extend: 'Ext.app.Controller',
        
        config: {
            refs: {
                viewport: 'viewport',
            },
            control: {
                viewport: {
                    orientationchange: 'handleOrientationChange'
                }
            }
        },
        init: function(){
            this.callParent(arguments);
        },
        handleOrientationChange: function(viewport, orientation, width, height){
            var realOrientation = Ext.Viewport.determineOrientation();        
            console.log(realOrientation); //echos portrait or landscape respectively
        }
    });

  5. #4
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    San Antonio, TX
    Posts
    93
    Answers
    4
    Vote Rating
    0
    jnotti is on a distinguished road

      0  

    Default Follow-up to original question

    Follow-up to original question


    In ST1, the setProfile method was called on every component. Is there an equivalent in ST2? I'd like to be able to tell my components what state to be in based on what orientation the app launches in. From a complexity standpoint, If I could include this in one controller where I manage the orientationchange that would be a plus.

    This is the ST1 code:

    Code:
    viewport.setProfile = function (profile) {
                if (profile=='portraitPhone') {
                    this.setActiveItem(this.menu);
                    if (!this.showingSplash) {
                        this.setActiveItem(this.page);
                    }
                } else if (profile=='landscapePhone') {
                    this.remove(this.menu, false);
                    this.setActiveItem(this.page);
                } else if (profile=='portraitTablet') {
                    this.removeDocked(this.menu, false);
                } else if (profile=='landscapeTablet') {
                    this.addDocked(this.menu);
                }
            };

  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    There is no equivalent in ST2. You can listen for the resize event on the components
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #6
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    San Antonio, TX
    Posts
    93
    Answers
    4
    Vote Rating
    0
    jnotti is on a distinguished road

      0  

    Default


    Would you mind elaborating on that? Why the resize event? Is this a workaround or the recommended direction moving forward? Thank you Sir!

    Edit: After reading about this event in the API, it states

    "Important note: For the best performance on mobile devices, use this only when you absolutely need to monitor a Component's size."

    How is this going to impact an app if there are multiple resize listeners?

  8. #7
    Sencha User
    Join Date
    Mar 2011
    Posts
    10
    Answers
    2
    Vote Rating
    0
    regedit is on a distinguished road

      0  

    Default


    I had been pulling my hair out on this for a while and was finally able to put together an ugly solution (if it helps)

    In my view file I have a fn which loads content based on orientation.

    #view
    Code:
    //config, xtype, etc ...
    content: function(){
      if (Ext.Viewport.getOrientation() == 'portrait'){
        this.setHtml('Portrait Content')    
        //put whatever logic you want here ... toolbar.show(), panel.setDocked('left'), etc  
      } else {
        this.setHtml('Landscape Content')
        //etc..
      }
    }
    In my controller I have three things ..
    1.) In the init function, there's a listener for 'activeitemchange' events which stops any existing 'orientationchange' listeners on every page change (in this case, whether the listener exists or not )
    2.) And an onOrientaionChange method which executes the current views content function.
    3.) The main function (which listens for routes, loads views, etc) checks if the content function exists in the new view. If it does exists, it runs it and starts an 'orientationchange' listener on the Viewport.

    The above isn't very linear - but in short there needs to be a way to initially load the correct content based on the current device orientation (*and if they navigate away from this page, rotate their device and then return). As well as when a client rotates their device while viewing the current page.

    #controller
    Code:
    //config ..etc
    init: function() {
      //other stuff .... 
      this.getViewport().on('activeitemchange', 
        function(){
          Ext.Viewport.un('orientationchange', 'onOrientationChange', this);
      }, this);            
    },
    
    onOrientationChange: function() {
      this.getViewport().down(this.getViewport().getActiveItem().config.xtype).content()    
    },
    
    main: function(view) {
      //load xtype etc..
      this.getViewport().setActiveItem(view);    
     
      if(typeof this.getViewport().down(this.getViewport().getActiveItem().config.xtype).content == 'function') {
        this.getViewport().down(this.getViewport().getActiveItem().config.xtype).content()    
        Ext.Viewport.on('orientationchange', 'onOrientationChange', this);
      } 
    
    }
    *sorry if the color code is annoying - it's my attempt to tie all the pieces together

    I'm still struggling to come up to speed on ST2 ... and have a few new ideas already on to optimize this, but i'm sure there are much better ways to accomplish this. Hopefully this at least gives you a starting point.

  9. #8
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    San Antonio, TX
    Posts
    93
    Answers
    4
    Vote Rating
    0
    jnotti is on a distinguished road

      0  

    Default


    @regedit, thanks for the detailed post, def helped me pull it together. I still haven't been able to make this work well without feeling like its a hacked solution though. I wish the Sencha team would address this in the future RC/GA.

Thread Participants: 2