Sencha how to update viewport on click on tabpanel?

1
votes

I have an MVC multi item & paged image carousel in Sencha Touch 2, which works perfectly on it's own when added to the Viewport on init.

However, the problem I am having now is how to adapt it to my tab panel style app. I am a little unclear where I should put the code, at init or (I'm guessing) in the controller which fires on click of the specific tab. My tabpanel style app was downloaded from Github (Sencha touch 2 boilerplate template).

My working MVC carousel calls the following in the app.js:

  controllers: ['Main'], 
  views: ['Carousel', 'Page'], 
  stores: ['Thumbnails'], 
  models: ['Thumbnail'], 

  launch: function () {
var carousel = Ext.create('Ext.Carousel');
Ext.Viewport.add(carousel);

Ext.getStore('Thumbnails').load(function (apps) {
  var cols = 4, rows = 4; // todo: change for tablets
  var page;
  var btn;
  var iPage = 0;
  var iApp = 0;
  var x = 1, y = 1, z = 0;
  var row, grid, bottomrow;
  var firstpage = 0;

etc....code cut for readbility.

Basically I want this carousel to appear on the second tab of the tabpanel, not initially on the viewport how it works now. Perhaps I should have the working launch code in a controller that fires when I'm on that tab of the tabpanel? I'm not sure of the best way to approach this.

Here is the launch function of my tabpanel app, with the 

    launch: function() {
    Ext.create('TCApp.view.Viewport', {fullscreen: true});

// I have tried adding this working launch code after creating the Viewport, but maybe it should be in the controller? But I'm not sure how to go about it...

    var carousel = Ext.create('Ext.Carousel');  

    Ext.Viewport.add(carousel);


   Ext.getStore('Thumbnails').load(function (apps) {
 var cols = 4, rows = 4; // todo: change for tablets
 var page;
 var btn;
 var iPage = 0;
 var iApp = 0;
 var x = 1, y = 1, z = 0;
 var row, grid, bottomrow;
 var firstpage = 0;

Any help would be much appreciated!

2
sencha-touch-2carouselinit

2 Answers

2
votes

You are adding your carousel to Ext.Viewport, which is the component that gets instantiated by default on application bootstrap. So, instead of using Ext.Viewport.add(carousel);, and adding it to the Viewport itself, try with 

tabpanel.add(carousel);

Where tabpanel is the reference to your tab panel instance. This way you'll be adding the carousel to the first available card in Ext.tab.Panel

0
votes

Thanks Grgur, it helped. I eventually solved it this way, making sure to have a title and iconCls otherwise I get an error in the console when adding the carousel item to the tabpanel:

var carousel = Ext.create('Ext.Carousel', {
title: 'Carousel',
iconCls: 'info'
});

var MyTabPanel = Ext.getCmp('mytabpanel');
MyTabPanel.add(carousel);