Loading tablet view in sencha

Question

Facing issue in loading the tablet view. I am maintaining separate navigation view for phone and tablet. But still during loading the tablet takes phone view. If i tried to create normal container i can able to do but not with navigation view

Tablet.js

  Ext.define('ABCapp.profile.Tablet', {
      extend: 'ABCapp.profile.Base',

      config: {
          name: 'Tablet',
          views: [

              'ABCapp.view.tablet.HomeView',
              'ABCapp.view.tablet.home.HomeViewMain',
          ]
      },

      isActive: function() {
          return Ext.os.is.Tablet || Ext.os.is.Desktop;
      },
      launch: function() {
          console.log('Tablet Init');
          Ext.Viewport.add(Ext.create('ABCapp.view.tablet.HomeView'));
          this.callParent();
      }
  });

Phone.js

  Ext.define('ABCapp.profile.Phone', {
      extend: 'ABCapp.profile.Base',

       config: {
        name: 'Tablet',
         views:[


          'ABCapp.view.tablet.HomeView',
          'ABCapp.view.tablet.home.HomeViewMain',


         ]
        },

       isActive: function() {
    return  Ext.os.is.Phone;
},

    launch: function() {
        console.log('Phone Init');
         Ext.Viewport.add(Ext.create('ABCapp.view.phone.HomeView'));
          this.callParent();
    }
});

Homeview Tablet

  Ext.define('ABCapp.view.tablet.HomeView', {
        extend: 'Ext.navigation.View',
        xtype: 'homeView',

        config:{              
            id:'homeView', 
            navigationBar: {
            hidden: true
            },
           items: [
              {
               xtype: 'homeViewMain'
              }
        ]
      }

});

Answer 1

I faced the same issue before and i think Ext.os.is.Phone is not a correct way of detecting the device. For example, it was detecting my 7inc android tablet as a phone.

So, it is better to write your own algorithm for tablet-phone separation. This is what i used before for small screens:

isActive: function(){
    var width = Ext.getBody().getWidth();
    var height = Ext.getBody().getHeight();

    var pw = Math.min(width, height); // portrait width
    var ph = Math.max(width, height); // portrait height

    // assume 600-width and 750-height in portrait mode are bounds
    var maxWidth =  620,
        maxHeight = 750;

    return (pw <= maxWidth && ph <= maxHeight);

    // iphone6: 375*667 (portrait)
    // ipadmini: 1024*768
    // nexus7: 966*604
    // lenovo7inc: 1024*527 (statusbars...)
}