View Full Version : Card and fit layout not working inside panel

6 Sep 2011, 8:42 AM
I ran into a strange layout issue in our application and have simplified it down to the following reproduction. I have a panel containing a subpanel with a card layout that contains another panel with html content. The problem is that the html content is never displayed. It shows up in the DOM, but doesn't get displayed. If I change the layout to null or vbox, it gets displayed but 'fit' and 'card' don't display anything.

Here is the code. Any ideas?

<title>Holder Layout Test</title>
<link rel="stylesheet" href="../deps/sencha_touch/resources/css/sencha-touch.css" type="text/css"/>
<script type="text/javascript" src="../deps/sencha_touch/sencha-touch-debug-w-comments.js"></script>
<script type="text/javascript">
onReady: function() {

var sub_panel = new Ext.Panel(
cls: 'bogus_holder',
layout: 'card', // works with null or 'vbox'. no work with 'fit' or 'card'.

items: [
cls: 'inner_panel',
html: 'inner panel html'

// create panel with buttons and list of contacts
var panel = new Ext.Panel({
fullscreen: true,
id: 'Main Panel',
xtype: 'panel',
dockedItems: [{xtype: 'toolbar', title:'Test App'}],
items: [sub_panel]
}); // panel

//panel.add(sub_panel); // option to add it later, doesn't work.

//panel.doLayout(); // doesn't help

6 Sep 2011, 11:58 PM
Your main panel is missing a layout config.

Try to add layout: 'fit' on your panel.