2

我不确定我是否了解如何在 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 版本。这里发生了什么？

4

2 回答 2

2

以下是在 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'
    }]
  }
});

而已。你应该准备好了。

希望这有帮助

于 2012-11-21T19:24:41.530 回答
1

您使用相同的 xtype 两次。

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

将上述两个组件更改为xtype: 'tabletcompare'和之类的东西xtype: 'phonecompare'。

和

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

或者

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

引用对象时。

希望这可以帮助！

于 2012-11-21T18:17:36.390 回答