PDA

View Full Version : Auto height and stretchmax in hbox layouts



ts-gbtec
17 Mar 2010, 9:52 AM
I'm not sure, if I should open a new thread for this. I've tried to solve a problem with button groups in a toolbar (http://www.extjs.com/forum/showthread.php?t=94375) by using a hbox layout with button groups. Unfortunately, I've another height problem now. I would like to have all button groups with the same height depending of the max one. What is wrong with my configuration?



/*!
* Ext JS Library 3.0.3
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/

Ext.onReady(function(){

var SamplePanel = Ext.extend(Ext.Panel, {
width: 500,
height:250,
style: 'margin-top:15px',
bodyStyle: 'padding:10px',
renderTo: 'docbody',
autoScroll: true
});

new SamplePanel({
title: 'Mix and match icon sizes to create a huge unusable toolbar',
items: {
layout: 'hbox',
height: 200,
layoutConfig: {
align:'stretchmax'
},
items: [{
xtype: 'buttongroup',
columns: 2,
autoHeight: true,
title: 'Clipboard',
items: [{
text: 'A',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow'
},{
xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
},{
text: 'Copy', iconCls: 'add16'
},{
text: 'Format', iconCls: 'add16'
}]
},{
autoHeight: true,
xtype: 'buttongroup',
title: 'Other Actions',
items: [{
text: 'Paste',
scale: 'large',
iconCls: 'add',
iconAlign: 'top'
}]
}]
}
});
});

steffenk
17 Mar 2010, 5:22 PM
just from reading: if you use autoHeight you can't expect Ext do the height for you. it means that the height is determined by the child height.

Animal
18 Mar 2010, 5:58 AM
Why the bizarre extend-to-configure?

This works OK:



new Ext.Panel({
width: 500,
height: 400,
renderTo: document.body,
autoScroll: true,
layout: 'anchor',
title: 'Mix and match icon sizes to create a huge unusable toolbar',
items: {
anchor: '100%',
height: 200,
layout: {
type: 'hbox',
align:'stretchmax'
},
items: [{
xtype: 'buttongroup',
columns: 2,
title: 'Clipboard',
items: [{
text: 'A',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow'
},{
xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
},{
text: 'Copy', iconCls: 'add16'
},{
text: 'Format', iconCls: 'add16'
}]
},{
xtype: 'buttongroup',
title: 'Other Actions',
items: [{
text: 'Paste',
scale: 'large',
iconCls: 'add',
iconAlign: 'top'
}]
}]
}
});

There's only a small difference anyway, but the left one gets stretched a little.

ts-gbtec
18 Mar 2010, 8:31 AM
I've used an extjs example for toolbars to play with and find the problem. Therefore, the bizarre extend-to-configure. My actual code is far more complex.

Unfortunately, your code doesn't work for me in both FF 3.6 and IE8 (see attached image). It looks exactly like my try.

ts-gbtec
22 Mar 2010, 5:10 AM
Does animals example work for anyone?

Animal
22 Mar 2010, 5:18 AM
I'm running the 3.2 branch code.

ts-gbtec
22 Mar 2010, 1:28 PM
Thanks for the hint. I haven't tried it before but it works with 3.1.1, too. So I guess we have to upgrade from 3.0.3 to 3.1.1.