Responding to the orientation change_Sencha Touch Cookbook-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

Responding to the orientation change

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.

How to do it...

Carry out the following steps:

Create and open a new file named ch01_06.js in the ch01 folder 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.

How it works...

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.

There's more...

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.

Stopping the orientation change

If a component wants to ignore the orientation change, then it should implement the beforeorientationchange listener which should return false. The following code snippet shows how to do it:

beforeorientationchange: function(thisPnl, orientation, width, height) {
   return false;
}