Question

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

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”;然后当加载该特定配置文件时，它只加载那些附加视图。

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

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

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

Answer 1

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

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

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

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：

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：

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'
    }]
  }
});

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

希望这有帮助

Answer 2

您使用相同的xtype两次。

将xtype视为组件的简称。每个组件都需要有一个唯一的短名称，否则它将被更新的定义覆盖。

将上述两个组件更改为xtype: 'tabletcompare'和xtype: 'phonecompare'。

和

this.getAview().push({xtype:'tabletcompare'}) <br>

或者

this.getAview().push({xtype:'phonecompare'})

引用对象时。

希望这有帮助！

加载不同配置文件的不同视图

2 个答案: