Does Ext.layout.CardLayout require full screen viewing?

Question

I am programming a Sencha Touch application with a moderately complex composition Ext.TabBar with Ext.Panel inside it.

But my Ext.Panel using Ext.layout.CardLayout works in a mysterious problem if the fullscreen: true property is not set on it fullscreen: true : it throws TypeError: Object card has no method 'setActiveItem' when I try to call the panel .setActiveItem() method This is not in my proof of the concept version in which fullscreen: true is included.

I can replicate the issue on the Chrome console on the Sencha Touch library page loaded as follows:

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

And this does not happen with the .fullscreen property:

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

What gives?

Version Information: I am using Sencha Touch 1.0.1a

Update 1 (January 3, ~ 10.30UTC + 1h), switching with the debugger and detecting things:

Just setting layout: 'card' will not lead to the creation of a real Ext.layout.CardLayout object created for the real one. Because .setActiveItem() tries to delegate the compent .layout property, it will crash almost instantly. However, installing .layout in the new Ext.layout.CardLayout causes more problems in the line.

Update 2 : (January 3, ~ 12: 25UTC + 1h) It all comes down to various component objects that are not rendered / added to the dependency in order to be ready for rendering. I managed to get my code to work by adding listeners, first the listener for the added event on the application panel, which has this.setLayout(new Ext.layout.CardLayout()); and then the afterrender listener of the component afterrender added, which finally calls .setActiveItem() to switch to the desired map.

Answer 1

The layout of the card works great when it is not external, full-screen, but, of course, something should be the main, full-screen panel.

In this case, I use the “fit” layout around the layout of the internal map, and setting the active element 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 it is more about whether a panel was provided or not, and full-screen mode: true just leads to immediate rendering (and of any children, so it works in my code above).

This is from the source of 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; } 

I suppose you could make some of these settings manually ... but I have to ask, how do you avoid the ancestor in the entire external component of the screen?

Answer 2

I had the same problem. The layout of the map only works if there was a “fit” layout on the container panel. But setting the container class to match the scroller is not working properly. So I needed to disable the scroller for the container and the card panel and install the scroller for the children of the card panel.

Answer 3

Update 2 in my question type answers to the question, although the solution feels obviously rude. I will not be too surprised if it breaks in future versions of Sencha Touch.

Answer 4

Sencha may have changed this as it was published since I am not getting an error. However, setActiveItem () will cause my views to be displayed immediately, which is undesirable when setting up the user interface. If you want to set the initial card without immediately visualizing the views, use the property directly, not the setter, for example:

 yourComp.activeItem = yourView; 

instead

 yourComp.setActiveItem(yourView);