Question

我有一个MVC多项目＆amp; Sencha Touch 2中的分页图像轮播，在初始化时添加到视口中时可以自行运行。

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

我工作的MVC轮播在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;

等......为了可读性而削减了代码。

基本上我希望这个轮播显示在tabpanel的第二个标签上，而不是最初在视口上显示它现在如何工作。也许我应该在控制器中使用工作启动代码，当我在tabpanel的选项卡上时会触发它？我不确定解决这个问题的最佳方法。

以下是我的tabpanel应用的启动功能，其中包含

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

//我在创建Viewport之后尝试添加这个工作启动代码，但也许它应该在控制器中？但我不确定该怎么做......

    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);，而是将其添加到Viewport本身，请尝试使用

tabpanel.add(carousel);

tabpanel是对标签面板实例的引用。这样您就可以将轮播添加到Ext.tab.Panel

中的第一张可用卡片中

Answer 2

谢谢Grgur，它有所帮助。我最终以这种方式解决了这个问题，确保有一个标题和iconCls，否则我在控制台中将carousel项添加到tabpanel时会出错：

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

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

Sencha如何在点击tabpanel上更新视口？

2 个答案: