1

我在 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;

任何帮助将非常感激！

4

2 回答 2

2

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

tabpanel.add(carousel);

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

于 2012-05-12T12:23:23.010 回答
0

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

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

var MyTabPanel = Ext.getCmp('mytabpanel');
MyTabPanel.add(carousel);
于 2012-12-16T19:45:24.193 回答