javascript – Ext.layout.CardLayout需要全屏吗？

2019年8月3日 154次阅读

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

但是我的Ext.Panel使用Ext.layout.CardLayout在没有全屏：true属性设置时会遇到一个神秘的问题：它会抛出一个TypeError：当我尝试调用面板时,对象卡没有方法’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'

并且.fullscreenproperty不会发生这种情况：

> 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),踩着调试器并发现事情：

只需设置布局：’card’不会触发为真实创建的实际Ext.layout.CardLayout对象的创建.由于.setActiveItem()尝试委托给竞争对手的.layout属性,它几乎会立即失败.但是,将.layout设置为新的Ext.layout.CardLayout会导致更多问题.

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

最佳答案 当卡片布局不是外部全屏幕时,卡片布局工作正常,但当然必须有根,全屏面板.

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

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

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

点赞