MVC Profiles & Orientation Change

[jnotti]

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!

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?
    }


});

[mitchellsimoens]

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

[jnotti]

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

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

[jnotti]

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:

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

[mitchellsimoens]

There is no equivalent in ST2. You can listen for the resize event on the components

[jnotti]

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?

[regedit]

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

//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

//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.

[jnotti]

@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.