煎茶如何在单击选项卡面板上更新视口

Question

我在Sencha Touch 2中有一个MVC多项目和分页图像轮播，当添加到init的视口时，它可以完美地工作。

但是，我现在遇到的问题是如何使其适应我的选项卡面板样式应用程序。我有点不清楚我应该将代码放在哪里，在 init 或(我猜(在单击特定选项卡时触发的控制器中。我的标签面板样式应用程序是从 Github 下载的(Sencha touch 2 样板模板(。

我的工作 MVC 轮播在应用程序中调用以下内容.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;

等。。。。代码剪切以提高可读性。

基本上，我希望这个轮播出现在选项卡面板的第二个选项卡上，而不是最初出现在视口上，它现在的工作方式。也许我应该在控制器中具有有效的启动代码，当我在选项卡面板的该选项卡上时触发？我不确定解决这个问题的最佳方法。

这是我的标签面板应用程序的启动功能，带有

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

创建视口后，我尝试添加此工作启动代码，但也许它应该在控制器中？但是我不知道该怎么做...

    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;

任何帮助将不胜感激！

Answer 1

您正在将轮播添加到 Ext.Viewport ，这是在应用程序引导程序上默认实例化的组件。因此，与其使用 Ext.Viewport.add(carousel); ，并将其添加到视口本身，请尝试使用

tabpanel.add(carousel);

其中tabpanel是对选项卡面板实例的引用。这样，您就可以将轮播添加到Ext.tab.Panel的第一个可用卡片中

Answer 2

谢谢Grgur，它有帮助。我最终以这种方式解决了它，确保有一个标题和图标Cls，否则在将轮播项目添加到选项卡面板时，我在控制台中出现错误：

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