Orientation Landscape & Portrait

[wiwi]

Hello, I'm using Sencha Touch 2, and I was looking at the sencha docs how to change the layout size after orientation changes, actually I found only this example,
Ext.device.Orientation.on({
scope: this,
orientationchange: function(e) {
console.log('Alpha: ', e.alpha);
console.log('Beta: ', e.beta);
console.log('Gamma: ', e.gamma);
}
});
and it seems not clear enough for me as I have to implement orientation changes on my app , any help will be so kind, thanks in advance.

[sword-it]

Hi wiwi,

Orientation change is handled by the Viewport, Essentially, on the initialization of a Panel, you add a listener (where on is an alias for addListner ) to the panel. From there, you create a new method called 'handleOrientationChange` (or whatever you want to call it) that will execute when the Viewport Orientation Changed

Ext.define('app.view.home.indexView', {
    extend: 'Ext.Panel',
    alias: 'widget.home-indexView',
    config: { 
        //...
    },
    // Fires when the Panel is initialized
    initialize: function () {
        console.log('app.view.home.indexView ~ initialize');
        // Add a Listener. Listen for [Viewport ~ Orientation] Change.
        Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, {buffer: 50 });
        this.callParent(arguments);
    },
    handleOrientationChange: function(){
        console.log('rpc.view.home.indexView ~ handleOrientationChange');
        // Execute the code that needs to fire on Orientation Change.
    }
};

For more detail see

http://www.developria.com/2010/11/ma...ware-apps.html

[wiwi]

Hi sword-it,

Appreciating your help, in fact I have created a master view (in the root app folder), in witch I'm calling models, stores, controllers(php files), and profiles for iphone and ipad, so the second view is defined in every subdirectory of each profile(phone, tablet), it's called depending on the device, I just don't get where I have to put the listenners, functions and alias,
I'm in troubles .

[sword-it]

Ext.Viewport fires an orientationchnage event you can use xtype 'viewport' in your controller to listen Ext.Viewport under control config Like-

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

See this thread http://www.sencha.com/forum/showthre...ntation-Change

[wiwi]

Actually you answer helped me a lot, now I can see an event after changing the phone orientation,
Ext.define('applmlm.controller.phone.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);

if(orientation == Ext.Viewport.PORTRAIT){
//show toolbars
// this.down('toolbar[cls=topToolbar]').show();
alert('Portrait');
} else {
//hide toolbars
// this.down('toolbar[cls=topToolbar]').hide();
alert('Landscape');
}
}
});

I've tested it with alert, because hiding or showing toolbars doesn't seems working, I have some lists and buttons, that I have to resize, can I do that with Ext.getCmp('id').resize(); ???