Javascript Ext.layout.CardLayout需要全屏显示吗？

我正在编写一个Sencha Touch应用程序，它由

Ext.TabBar

和

Ext.Panel

组成

但是我的

Ext.Panel

使用

Ext.layout.CardLayout

遇到了一个神秘的问题，当它没有设置

全屏：true

属性时：当我试图调用

面板的
setActiveItem（）时，它抛出了一个
类型错误：对象卡没有方法“setActiveItem”
方法，它在我的概念验证版本中没有启用
全屏：true

我可以在Chrome控制台的一个页面上复制这个问题，并加载Sencha Touch库，如下所示：

> var p1 = new Ext.Panel({layout:'card', items:[{html:'a'},{html:'b'}]})
undefined
> p1.setActiveItem(0)
TypeError: Object card has no method 'setActiveItem'

yourComp.activeItem = yourView;

而
.fullscreen
属性不会发生这种情况：

> var p2 = new Ext.Panel({fullscreen: true,
                          layout:'card',
                          items:[{html:'a'},{html:'b'}]})
undefined
> p2.setActiveItem(0)
subclass

有什么好处

版本信息：我正在使用Sencha Touch 1.0.1a

更新1（1月3日，约10.30UTC+1h），使用调试器四处走动并发现一些问题：

仅设置
layout:“card”
不会触发为real创建的实际
Ext.layout.CardLayout
对象的创建。由于
.setActiveItem（）
尝试委托给compent的
.layout
属性，因此几乎会立即失败。但是，将
.layout
设置为新的
Ext.layout.CardLayout
会导致更多问题

更新2：（1月3日，~12:25UTC+1h）这一切都归结为各种组件对象没有充分渲染/插入到依赖项中以准备渲染。通过添加监听器，我成功地使代码正常工作，首先是封闭面板中添加的
事件的监听器，它执行
this.setLayout（new Ext.layout.CardLayout（））
，然后添加组件上的
afterrender
侦听器调用
.setActiveItem（）
以切换到所需的卡。
在我的问题中更新2某种程度上回答了这个问题，尽管该解决方案感觉非常复杂。如果它在未来的Sencha Touch版本中出现故障，我不会感到太惊讶。
如果不是外置的全屏布局，卡布局也可以，但当然必须是根全屏面板

在这种情况下，我在内部卡片布局周围使用“适合”布局，设置活动项效果良好：

var inner = new Ext.Panel({
    layout:'card',
    items:[
        {html:'a'},
        {html:'b'}
    ]
});

var outer = new Ext.Panel({
    fullscreen:true,
    layout:'fit',
    items:[
        inner
    ]
});

我怀疑问题更多的是面板是否被渲染，而全屏：true恰好强制立即渲染（以及任何子级渲染，这就是为什么它在我上面的代码中工作的原因）

这来自外部组件源：

if (this.fullscreen || this.floating) {
    this.monitorOrientation = true;
    this.autoRender = true;
}

if (this.fullscreen) {
    var viewportSize = Ext.Viewport.getSize();
    this.width = viewportSize.width;
    this.height = viewportSize.height;
    this.cls = (this.cls || '') + ' x-fullscreen';
    this.renderTo = document.body;
}

我想你可以手动进行一些设置。。。但是我不得不问，首先，如何避免在它之外有一个全屏祖先组件？
我也有同样的问题。只有当容器面板的布局为“适合”时，卡片布局才有效。但是将容器类设置为fit会导致滚动条无法正常工作。因此，我要做的是禁用容器和卡面板的滚动条，并为卡面板的子级设置滚动条。
Sencha可能已经更改了这一点，因为我没有收到错误。但是，setActiveItem（）将强制立即呈现我的视图，这在设置UI时是不可取的。如果要在不立即渲染视图的情况下设置初始卡，请直接使用属性而不是setter，如下所示：

> var p1 = new Ext.Panel({layout:'card', items:[{html:'a'},{html:'b'}]})
undefined
> p1.setActiveItem(0)
TypeError: Object card has no method 'setActiveItem'

yourComp.activeItem = yourView;

而不是

yourComp.setActiveItem(yourView);

啊，我的例子可能有点误导：给我出问题的小组有全屏的祖先，但他们比直系父母进步了好几步（曾祖父…），这似乎给我出了问题。谢谢！在尝试将我的主选项卡面板包装成卡片布局，以便更好地切换其他内部细节之后，我也遇到了同样的问题。在我的app.js中使用你的第二次更新也帮助我解决了这个问题。很高兴它有帮助！这个问题让我很困惑。