PDA

View Full Version : How to shrink wrap button panel



abierbaum
14 Jun 2011, 7:31 AM
I am trying to create a panel that will show a group of buttons at the top of the viewport followed by a list at the bottom. I can't see to get the layouts to work correctly though to shrink wrap the top panel around the buttons to a minimum size. (I have tried various settings of flex and resizing and it always goes wrong).

Here is a picture of what I have so far:

http://i.imgur.com/kPK40.png

As you can see, there is extra space below the button panel that I would like to get rid of. Any ideas?

Here is the current code:



<html>
<head>
<title>Button Panel 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() {
// Setup contact store
Ext.regModel('Contact', {
fields: ['name']
});
data = []
for(var x=0; x<30; x++)
{ data.push({name: String(x)}); }

Ext.regStore('contacts', {
model: 'Contact',
data: data
});

// create buttons to show
buttons = [];
for(x=0; x<8; x++)
{
buttons.push(new Ext.Button({
text: 'button ' + x,
margin: '2px'
}));
}

// create panel with buttons and list of contacts
var panel = new Ext.Panel({
fullscreen: true,
id: 'Control Area',
xtype: 'panel',
layout: {
type: 'vbox',
align: 'stretch',
},
dockedItems: [
],
items: [
{
flex: 1,
id: 'top_panel',
xtype: 'panel',
style: 'background-color: #C0C0C0',
padding: 5,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'panel',
id: 'left_panel',
flex: 1,
//width: '50%',
style: 'background-color: #B0B0B0',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
buttons[0],
buttons[1],
buttons[2]
]
},
{
xtype: 'panel',
id: 'right_panel',
flex: 1,
//width: '50%',
style: 'background-color: #E0E0E0',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
buttons[3],
buttons[4],
buttons[5],
]
},
]
},
{
flex: 2,
xtype: 'list',
margin: 5,
store: 'contacts',
scroll: 'vertical',
itemTpl: '{name}',
style: 'background-color: #E0B0B0',
onItemDisclosure: function() {console.log('selected'); }
}
]
}); // panel
}
});
</script>
</body>
</html>

mitchellsimoens
14 Jun 2011, 3:00 PM
Remove flex on top panel and use auto height. Bottom panel have flex of 1

abierbaum
14 Jun 2011, 4:51 PM
Remove flex on top panel and use auto height. Bottom panel have flex of 1

Thanks for the hint. I tried it, but it didn't seem to work. Here is the new screenshot.

http://i.imgur.com/8akK8.png

The changed code is here:



<html>
<head>
<title>Button Panel 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() {
// Setup contact store
Ext.regModel('Contact', {
fields: ['name']
});
data = []
for(var x=0; x<30; x++)
{ data.push({name: String(x)}); }

Ext.regStore('contacts', {
model: 'Contact',
data: data
});

// create buttons to show
buttons = [];
for(x=0; x<8; x++)
{
buttons.push(new Ext.Button({
text: 'button ' + x,
margin: '2px'
}));
}

// create panel with buttons and list of contacts
var panel = new Ext.Panel({
fullscreen: true,
id: 'Control Area',
xtype: 'panel',
layout: {
type: 'vbox',
align: 'stretch',
},
dockedItems: [
],
items: [
{
//flex: 1,
height: 'auto',
id: 'top_panel',
xtype: 'panel',
style: 'background-color: #C0C0C0',
padding: 5,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'panel',
id: 'left_panel',
flex: 1,
//width: '50%',
style: 'background-color: #B0B0B0',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
buttons[0],
buttons[1],
buttons[2]
]
},
{
xtype: 'panel',
id: 'right_panel',
flex: 1,
//width: '50%',
style: 'background-color: #E0E0E0',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
buttons[3],
buttons[4],
buttons[5],
]
},
]
},
{
flex: 1,
xtype: 'list',
margin: 5,
store: 'contacts',
scroll: 'vertical',
itemTpl: '{name}',
style: 'background-color: #E0B0B0',
onItemDisclosure: function() {console.log('selected'); }
}
]
}); // panel
}
});
</script>
</body>
</html>