Sencha如何在点击标签面板时更新视口？

Posted 2023-02-25

【中文标题】Sencha如何在点击标签面板时更新视口？

【英文标题】：Sencha how to update viewport on click on tabpanel?

【发布时间】：2012-05-11 14:39:09

【问题描述】：

我在 Sencha Touch 2 中有一个 MVC 多项目和分页图像轮播，当在初始化时添加到视口时，它可以完美地独立运行。

但是，我现在遇到的问题是如何使其适应我的标签面板样式应用程序。我有点不清楚我应该把代码放在哪里，在 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 应用的启动功能，带有

    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;

任何帮助将不胜感激！

【参考方案1】：

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

tabpanel.add(carousel);

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

【讨论】：

非常感谢，我会试试这个....我认为这可能是问题所在。最好将代码添加到轮播控制器中，以便仅在您进入该选项卡时加载？我也在尝试节省内存...

理想情况下，您应该将代码放在一个控制器中，该控制器在逻辑上控制轮播的行为，无论是标签面板、主控制器还是轮播控制器。确保它是基于事件的（基于tap|show|else），你会没事的。如果您的轮播需要在应用启动时可用，只需确保将其作为 xtype（例如在您的选项卡视图中）添加到选项卡面板的项目中，并且不要忘记设置适当的需要配置选项。

【参考方案2】：

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

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

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