Question

在加载平板电脑视图时遇到问题。我正在为手机和平板电脑维护单独的导航视图。但仍然在加载过程中平板电脑需要手机查看。如果我试图创建普通容器，我可以做但不能导航视图

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

之前我遇到过同样的问题，我认为Ext.os.is.Phone不是检测设备的正确方法。例如，它正在检测我的7inc安卓平板电脑作为手机。

因此，最好为平板电话分离编写自己的算法。这是我之前用于小屏幕的内容：

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

在sencha中加载平板电脑视图

1 个答案: