加载不同配置文件的不同视图 [英] Loading different views for different profiles

问题描述

我不确定我是否了解如何在Sencha Touch 2应用中使用个人资料视图。

I'm not sure I understand how to use profile views within a Sencha Touch 2 app.

Ext.define(App.view.phone.PhonePanel, {
    extend: 'Ext.tab.Panel',
    xtype: 'Compare'
    config: {
         items: [
            { xtype: 'PanelA' },
            { xtype: 'Panel B' }
         ]
    }
})

Ext.define(App.view.tablet.TabletPanel, {
    extend: 'Ext.Panel',
    xtype: 'Compare'
    config: {
         layout: 'vbox',
         items: [
            { xtype: 'PanelA', flex: 1 },
            { xtype: 'Panel B', flex: 1 }
         ]
    }
})

然后在手机配置文件中，它添加PhonePanel作为视图，平板电脑配置文件添加TabletPanel;然后当加载该特定的配置文件时，它只加载那些额外的视图。

And then within the Phone Profile, it adds "PhonePanel" as a view, and the Tablet profile adds "TabletPanel"; and then when that specific profile is loaded it only loads those additional views.

我遇到的问题是Sencha正在从两个配置文件加载文件，并且正在执行

The problem I'm having is that Sencha is loading files from both profiles, and doing

this.getAview().push({xtype:'Compare'});

当手机配置文件处于活动状态时，它实际上会推送平板电脑的xtype版本。这里发生了什么？

While the phone profile is active, it actually pushes the Tablet's version of the xtype. What is going on here?

推荐答案

以下是在Sencha Touch 2应用程序中创建配置文件的不同步骤：

These are the different steps to create profiles in a Sencha Touch 2 application :

创建包含以下代码的app / profile / Base.js

如果您更有可能需要基本配置文件您在两个配置文件的应用程序启动时执行相同的代码。所以这一步是强制性的

You're more likely to need a base profile if you execute the same code at the launch of the app for both the profiles. So this step is mandatory

Ext.define('App.profile.Base', {
  extend: 'Ext.app.Profile',

  launch: function () {

    /* Custom Code */

    Ext.fly('booting').destroy();
  }

});

创建包含以下代码的app / profile / Phone.js

如果你选择没有基本控制器，那么一定要扩展 Ext.app.Profile 而不是 App.profile.Base ：

If you chose to go without the base controller, then be sure to extend Ext.app.Profile instead of App.profile.Base :

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

  config: {
    controllers: ['Main'],
    views: ['Main']
  },

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

  launch: function() {
    Ext.create('App.view.phone.Main');
    this.callParent();
  }
});

创建包含以下代码的app / profile / Tablet.js

如果你选择没有基本控制器，那么一定要扩展 Ext.app.Profile 而不是 App.profile.Base ：

If you chose to go without the base controller, then be sure to extend Ext.app.Profile instead of App.profile.Base :

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

  config: {
    controllers: ['Main'],
    views: ['Main']
  },

  isActive: function() {
    return Ext.os.is.Tablet || Ext.os.is.Desktop;
  },

  launch: function() {
    Ext.create('App.view.tablet.Main');
    this.callParent();
  }
});

创建包含以下代码的app / view / phone / Main.js

Ext.define('App.view.phone.Main', {

  extend: 'Ext.Container',

  config: {
    fullscreen: true,
    items: [{
      html:'This is the main view for the phone profile'
    }]
  }
});

创建包含以下代码的app / view / tablet / Main.js

Ext.define('App.view.tablet.Main', {

  extend: 'Ext.Container',

  config: {
    fullscreen: true,
    items: [{
      html:'This is the main view for the tablet profile'
    }]
  }
});

就是这样。你应该全力以赴。

That's it. You should be all set.

希望这有所帮助

这篇关于加载不同配置文件的不同视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！