Loading different views for different profiles

Question

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

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.

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

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

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

Answer 1

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

Create app/profile/Base.js containing the following code

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();
  }

});

Create app/profile/Phone.js containing the following code

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();
  }
});

Create app/profile/Tablet.js containing the following code

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();
  }
});

Create app/view/phone/Main.js containing the following code

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

  extend: 'Ext.Container',

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

Create app/view/tablet/Main.js containing the following code

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.

Hope this helped

Answer 2

You are using the same xtype twice.

Think of an xtype as a short name for your component. Each component needs to have a unique shortname or it will just get overwritten by the more recent definition.

Change the above two components to something like xtype: 'tabletcompare' and xtype: 'phonecompare'.

AND

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

Or

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

when referencing the objects.

Hope this helps!