PDA

View Full Version : components in a container (manage by a cardview) expand beyond the bounds of that cnt



momesana
19 Nov 2010, 1:01 PM
Hi,
I have a Container which has a vbox layout and two child items. The first one (at the top) is a component with some simple html. The one below is another container with a cardlayout and child items of its own. Now the problem is that the child items of the latter expand beyond the bounds of that very container thereby overlapping the top component. Below is a simple testcase. Any ideas/suggestions on how to work around this or what I am doing wrong?

Thanks in advance

test.js


Ext.setup({
fullscreen: true,
statusBarStyle: 'black-translucent',
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function () {

Content = Ext.extend(Ext.Panel, {
initComponent: function () {
Ext.apply(this, {
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'component',
height: 50,
style: {
border: '2px dashed blue'
},
html: 'header section ...'
},
{
xtype: 'container',
id: 'content-container',
style: {
border: '2px dashed red'
},
layout: {
type: 'card'
},
flex: 1,
items: [{
xtype: 'container',
html: 'panel1'
},
{
xtype: 'container',
html: 'panel2'
}]
}]
});

Content.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('content', Content);

var ms = new Content({
fullscreen: true
});
}
});


The html file looks like this:



<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">@import "libs/sencha-touch/resources/css/sencha-touch-debug.css";</style>
<style type="text/css">
.screen {
background-color: rgb(220,220,220);
background-image: none;
}
</style>
<script type="text/javascript" src="libs/sencha-touch/sencha-touch-debug.js"></script>
<script type="text/javascript" src="js/test.js"></script>

</head>

<body>
</body>
</html>

gcallaghan
19 Nov 2010, 2:56 PM
try something like....



Content = Ext.extend(Ext.Panel, {
constructor: function (config) {
var options = {
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'component',
height: 50,
style: {
border: '2px dashed blue'
},
html: 'header section ...'
},
{
xtype: 'container',
id: 'content-container',
style: {
border: '2px dashed red'
},
layout: {
type: 'card'
},
flex: 1,
items: [{
xtype: 'container',
html: 'panel1'
},
{
xtype: 'container',
html: 'panel2'
}]
}]
};
Ext.apply(options,config);

Content.superclass.constructor.call(this, options);
}
});

I think doing what you've posted in the init is too late. Not 100% sure though.

momesana
20 Nov 2010, 5:07 AM
Thanks for your reply. I Just tried what you said but I still have the same issue. I've attached an image of how the page is rendered with Sencha 1.0 to this post. Here is the code:


Ext.setup({
fullscreen: true,
statusBarStyle: 'black-translucent',
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function () {

Content = Ext.extend(Ext.Panel, {
constructor: function (config) {
var options = {
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
height: 50,
style: { border: '2px dashed blue' },
html: 'header section ...'
},
{
xtype: 'container',
id: 'content-container',
style: { border: '2px dashed red' },
layout: { type: 'card' },
flex: 1,
items: [{
xtype: 'container',
html: 'Element Below ...'
},
{
xtype: 'container',
html: 'panel2'
}]
}]
};

Ext.apply(options, config);

Content.superclass.constructor.call(this, options);
}
});
Ext.reg('content', Content);

var ms = new Content({
fullscreen: true
});
}
});

momesana
20 Nov 2010, 6:06 AM
Ok, found a workaround. Instead of using Container I am using Panel for the component that contains the card layout. This seems to work but I guess it's still a bug since container and panel should behave the same way here.

Cheers



Ext.setup({
fullscreen: true,
statusBarStyle: 'black-translucent',
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function () {

Content = Ext.extend(Ext.Panel, {
constructor: function (config) {
var options = {
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
height: 50,
style: { border: '2px dashed blue' },
html: 'header section ...'
},
{
xtype: 'panel',
id: 'content-container',
style: { border: '2px dashed red' },
layout: { type: 'card' },
flex: 1,
items: [{
xtype: 'container',
html: 'Element Below ...'
},
{
xtype: 'container',
html: 'panel2'
}]
}]
};

Ext.apply(options, config);

Content.superclass.constructor.call(this, options);
}
});
Ext.reg('content', Content);

var ms = new Content({
fullscreen: true
});
}
});

gcallaghan
20 Nov 2010, 8:32 AM
Looks like a perfect test case. Did you submit a bug report?