Question

我正在编写一个Sencha Touch应用程序，其中包含Ext.TabBar及其中Ext.Panel的中等复杂组合。

但是我的Ext.Panel使用Ext.layout.CardLayout在没有设置fullscreen: true属性时会遇到一个神秘的问题：当我尝试调用时，它会抛出一个TypeError: Object card has no method 'setActiveItem' panel的{{1}}方法，它在.setActiveItem()开启的概念验证版本中没有。

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

fullscreen: true

> var p1 = new Ext.Panel({layout:'card', items:[{html:'a'},{html:'b'}]}) undefined > p1.setActiveItem(0) TypeError: Object card has no method 'setActiveItem'属性不会发生这种情况：

.fullscreen

是什么给出了？

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

更新1 （1月3日，~10.30UTC + 1h），踩着调试器并发现事情：

设置> var p2 = new Ext.Panel({fullscreen: true, layout:'card', items:[{html:'a'},{html:'b'}]}) undefined > p2.setActiveItem(0) subclass不会触发为真实创建的实际layout: 'card'对象的创建。由于Ext.layout.CardLayout尝试委托给竞争对手的.setActiveItem()财产，因此它几乎会立即失败。但是，将.layout设置为新的.layout会导致更多问题。

更新2 :( 1月3日，~12：25UTC + 1h）这一切都归结为未在依赖项中呈现/插入的各种组件对象，足以准备呈现。我设法通过添加监听器来使我的代码工作，首先是在Ext.layout.CardLayout的封闭面板中的added事件的监听器，然后是最后添加的组件上的this.setLayout(new Ext.layout.CardLayout());监听器拨打afterrender切换到所需的卡片。

Answer 1

当卡片布局不是外部全屏幕时，它可以正常工作，但当然某些东西必须是根，全屏面板。

在这种情况下，我在内部卡片布局周围使用“适合”布局，并设置活动项目正常工作：

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

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

我怀疑问题更多的是关于面板是否已经渲染，而且全屏：真的恰好强制立即渲染（以及任何孩子，这就是为什么它在上面的代码中有效）。

这是来自Ext.Component来源：

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;
}

我想你可以手动完成一些这样的设置...但我不得不问，你怎么避免在它之外有一个全屏的祖先组件呢？

Answer 2

我遇到了同样的问题。卡片布局仅在容器面板具有“适合”布局时才有效。但是将容器类设置为适合导致滚动条无法正常工作。所以我要做的就是禁用容器和卡片面板的滚动条，并为卡片面板的子项设置滚动条。

Answer 3

在我的问题中更新2回答了这个问题，虽然解决方案感觉明显存在货物崇拜。如果它在未来的Sencha Touch版本中出现故障，我不会感到惊讶。

Answer 4

Sencha可能已经改变了这个，因为我没有收到错误。但是，setActiveItem（）将强制立即呈现我的视图，这在设置UI时是不合需要的。如果要设置初始卡而不立即渲染视图，请直接使用属性而不是setter，如下所示：

yourComp.activeItem = yourView;

而不是

yourComp.setActiveItem(yourView);

Ext.layout.CardLayout需要全屏吗？

4 个答案: