It is possible to change the orientation from portrait to landscape mode by turning your device. Many applications make use of this facility to provide better usability to the user. For example, when we are working with the virtual keyboard and change the orientation from portrait to landscape, the keyboard gets bigger and it becomes easier to type. Most of the devices support orientation changes and, based on your application, you may want to make use of this feature to change your application layout or behavior. Sencha Touch automatically watches for this and notifies all the application components by sending them the orientationchange event. If the application or any component of it needs to change its behavior, then the corresponding component registers a handler for the orientationchange event.
Carry out the following steps:
Create and open a new file named
ch01_06.jsin thech01folder and paste the following code into it:new Ext.Application({ name: 'MyApp', profiles: { phoneBlackberry: function() { return Ext.is.Blackberry; }, phoneAndroid: function() { return Ext.is.Android; }, tabletPortrait: function() { return Ext.is.Tablet && Ext.orientation == 'portrait'; }, tabletLandscape: function() { return Ext.is.Tablet && Ext.orientation == 'landscape'; } }, launch: function() { this.viewport = new Ext.Panel({ fullscreen: true, listeners: { orientationchange : function( thisPnl, orientation, width, height ){ Ext.Msg.alert("INFO","Orientation: " + orientation + " : width:" + width + ":height:" + height); } }, items : [ { html: 'Welcome to My App!' + ' - profile - ' + this.getProfile(), } ] }); } });Remove the following line from
index.html:<script type="text/javascript" charset="utf-8" src="ch01/ch01_05.js"></script>
Include the following line in
index.html:<script type="text/javascript" charset="utf-8" src="ch01/ch01_06.js"></script>
Deploy and run the application.
The Sencha Touch framework provides certain properties on the components, which directly affect the orientation change detection and notification. There are certain properties on the components based on which it derives whether the orientation change needs to be notified. The monitorOrientation property on the component directly instructs the library whether it has to monitor for the orientation change. This property is, by default, set to false—meaning, do not monitor for the orientation change. Hence, beforeorientationchange and orientationchange events will not be fired. However, the property fullscreen affects the monitorOrientation value. In the preceding code, fullscreen has been set to true, which sets the monitorOrientation to true and due to this, the library will monitor for the orientation change. When that happens, it fires the beforeorientationchange and orientationchange events. Any component which intends to handle the orientation change must implement the handler for these events.
On the container components (for example, Panel, TabPanel, and so on) enabling scrolling immediately sets the monitorOrientation to true.
Say, in your application, monitoring of the orientation change has been enabled, but some components neither want to handle the orientation change-related events, nor do they want the default behavior to be executed. In this case, these components will have to stop the orientation change and the subsequent section shows how to achieve that.