CODEWITHSUNDEEP
javascriptextjssencha-touch
Jacob Oscarson
Jacob Oscarson

Reputation: 6403

Ext.layout.CardLayout requires fullscreen?

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.

Upvotes: 4

Views: 4771

Answers (4)

Sebastien Martin
Sebastien Martin

Reputation: 1399

Sencha may have changed this since this was posted since I don't get an error. However, setActiveItem() will force my views to be rendered immediately which is undesirable when setting up the UI. If you want to set the initial card without rendering the views immediately, use the property directly instead of the setter, like this:

yourComp.activeItem = yourView;

instead of

yourComp.setActiveItem(yourView);

Upvotes: 0

Behrang Javaherian
Behrang Javaherian

Reputation: 11

I had the same problem. The card layout only works if the container panel had the layout of 'fit'. But setting the container class to fit was causing the scroller to not working properly. So what I had to do is disabling the scroller for container and the card panel and set the scroller for the children of card panel.

Upvotes: 1

James Pearce
James Pearce

Reputation: 2332

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?

Upvotes: 1

Jacob Oscarson
Jacob Oscarson

Reputation: 6403

Update 2 in my question kind of answers the question, although the solution feels distinctly cargo-cultish. I won't be too surprised if it breaks in future Sencha Touch versions.

Upvotes: 0

Related Questions