ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript-为不同的配置文件加载不同的视图

2019-10-11 23:38:00  阅读:197  来源: 互联网

标签:javascript sencha-touch-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'});

手机配置文件处于活动状态时,实际上会推送Tablet的xtype版本.这里发生了什么?

解决方法:

这些是在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'
    }]
  }
});

而已.你应该准备好了.

希望这有所帮助

标签:javascript,sencha-touch-2
来源: https://codeday.me/bug/20191011/1896379.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有