PDA

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



abierbaum
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?



<html>
<head>
<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>
</head>
<body>
<script type="text/javascript">
Ext.setup({
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



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

//panel.doLayout(); // doesn't help
//sub_panel.doLayout();
}
});
</script>
</body>
</html>

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

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