PDA

View Full Version : Control of layout



parseroo
5 Oct 2010, 1:01 PM
I am trying to get more control of Touch layouts, and can't seem to do so easily. The main issues:
* Hard to control flex when composing panels
* Hard to make things fixed size (say a top area 300px high) and have everything else flex

I am hoping I am just missing idioms to control this -- I can't actually fix this via CSS for these panels/containers because ST is putting in absolute pixel heights.

Say in the example below:
* How would you make 'top' be 300px (or 100em) high and 'bottom' take up the rest?
* How to make top be 1/3 of the whole and bottom 2/3?
* How do you make 'left-3' be big enough for a button and left-1 and left-2 take up the rest of the space?

Any help would be great.



<html>
<head>
<title>test</title>

<link rel="stylesheet" href="http://dev.sencha.com/deploy/touch/resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="http://dev.sencha.com/deploy/touch/ext-touch.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style type="text/css">
.s-WelcomeView {
background: white;
border: solid red;
}

.s-WelcomeView-topSide {
border: solid blue;
}

.s-WelcomeView-leftSide {
border: solid green;
}


</style>
</head>

<body>

<script type="text/javascript">
Ext.setup({
onReady: function() {


var topSide = new Ext.Panel({
layout: 'fit',
flex: 3,
scroll: 'none',
// height: 300,
items: [
{
cls: 's-WelcomeView-topSide-content',
html: "This is on top"
}
],

cls: 's-WelcomeView-topSide'
});


var leftSide = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},

items: [
{
layout: 'fit',
flex: 1,
items: [
{
html: "This is on left-1"
}
]
},

{
layout: 'fit',
flex: 1,
items: [
{
html: "This is on left-2"
}
]
},

{
xtype: 'spacer',
flex: 3
},

{
layout: 'fit',
flex: 1,
items: [
{
html: "This is on left-3"
}
]
}
],


cls: 's-WelcomeView-leftSide'
});


var rightSide = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},

items: [
{
layout: 'fit',
flex: 1,
items: [
{
html: "This is on right-1"
}
]
},

{
layout: 'fit',
flex: 1,
items: [
{
html: "This is on right-2"
}
]
},

{
xtype: 'spacer',
flex: 3
},

{
layout: 'fit',
flex: 1,
items: [
{
html: "This is on right-3"
}
]
}
],


cls: 's-WelcomeView-rightSide'
});


var bottomSide = new Ext.Panel({
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
flex: 1,
scroll: {
direction: 'vertical',
scrollbars: true
},
zzz: 'zzz'
},

items: [leftSide, rightSide],


cls: 's-WelcomeView-bottomSide'
});


var WelcomeView = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1,
scroll: 'none',
zzz: 'zzz'
},

// dockedItems: dockedItems, //toolbar1, //

items: [topSide, bottomSide],

cls: 's-WelcomeView'
}
);


}
});
</script>

</body>
</html>

evant
5 Oct 2010, 1:55 PM
1)



Ext.setup({
onReady: function(){
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
height: 300,
html: '300 high',
style: 'background-color: red;'
},{
flex: 1,
html: 'Rest',
style: 'background-color: blue;'
}]
});
}
});


2)



Ext.setup({
onReady: function(){
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: 'flex 1/3',
style: 'background-color: red;'
},{
flex: 2,
html: 'flex 2/3',
style: 'background-color: blue;'
}]
});
}
});


3)



Ext.setup({
onReady: function(){
new Ext.Panel({
fullscreen: true,
layout: 'hbox',
items: [{
xtype: 'button',
text: 'I am a button'
},{
flex: 1,
html: 'flex 1/2 - half',
style: 'background-color: red;'
},{
flex: 1,
html: 'flex 1/2 - half',
style: 'background-color: blue;'
}]
});
}
});

parseroo
5 Oct 2010, 2:11 PM
Thank you Evan. Those are good examples for reference.

It seems like most of the problem was coming from the defaults. If there is a default flex of 1, is it possible somehow to turn it back to 0 (disabled) in a subcomponent? Doing 'flex: 0' is being ignored it appears.

parseroo
5 Oct 2010, 2:22 PM
Also, as soon as I stack two buttons, the container seems to have lost the natural height / width. Modifying your third example slightly, the first vbox now has a width way beyond the size of the contained buttons.



Ext.setup({
onReady: function() {
new Ext.Panel({
fullscreen: true,
layout: 'hbox',
items: [
{
layout: 'vbox',
// width: 100,
// flex: 0,
items: [
{
xtype: 'button',
text: 'I am a button'
}
,
{
xtype: 'button',
text: 'I am a button'
}


]
},
{
flex: 1,
html: 'flex 1/2 - half',
style: 'background-color: red;'
},
{
flex: 1,
html: 'flex 1/2 - half',
style: 'background-color: blue;'
}
]
});
}
});