Question

I’m programming a Sencha Touch app with a moderately complex composition of Ext.TabBar with Ext.Panel ‘s inside it.

But my Ext.Panel using Ext.layout.CardLayout runs in to a mysterious problem when not having a fullscreen: true property set on it: it throws an TypeError: Object card has no method 'setActiveItem' when I try to call the panel‘s .setActiveItem() method which it didn’t in my proof of concept version that had fullscreen: true turned on.

I can replicate the problem on Chrome’s console at a page with the Sencha Touch library loaded like this:

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

And it doesn’t happen with the .fullscreenproperty:

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

What gives?

Version info: I’m using Sencha Touch 1.0.1a

Update 1 (Jan 3, ~10.30UTC+1h), stepping around with the debugger and discovering things:

Just setting layout: 'card' won’t trigger the creation of an actual Ext.layout.CardLayout object being created for real. Since .setActiveItem() tries to delegate to the compent’s .layout property, it will fail almost instantly. However, setting .layout to a new Ext.layout.CardLayout causes more problems down the line..

Update 2: (Jan 3, ~12:25UTC+1h) It all comes down to various component objects not being rendered/inserted in the dependency sufficiently to be ready to render. I managed to get my code working by adding listeners, first a listener for the added event in the enclosing panel that does a this.setLayout(new Ext.layout.CardLayout());, then an afterrender listener on the component being added that finally calls .setActiveItem() to switch to the desired card.

Answer 1

A card layout works fine when it’s not the outer, fullscreen one, but of course something has to be the root, fullscreen panel.

In this case, I’m using a ‘fit’ layout around the inner card layout, and setting the active item works fine:

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

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

I suspect the matter is more about whether the panel has been rendered or not, and fullscreen:true just happens to force immediate rendering (and of any children, which is why it works in my code above).

This is from the Ext.Component source:

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

I suppose you could do some of this set up manually… but I have to ask, how do you avoid have a fullscreen ancestor component outside it in the first place?