PDA

View Full Version : Height of toolbar button groups isn't the same with different content



ts-gbtec
16 Mar 2010, 3:10 AM
Hi,

I've a problem layouting a toolbar with button groups.

My first problem is the height. It looks weird with different heights for different layouts within the groups. I've tried to adjust the height by using boxMinHeight. However, neither boxMinHeight nor boxMinWidth seems to work.

My next problem is a button with short text. The button gets the width of the text even using large icons. My expectation was that the min-width would be 32 pixel for a large button.

Pasting this code in toolbar.js (examples directory) should visualize the problems. Any suggestions?



/*!
* 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',
html: Ext.example.shortBogusMarkup,
autoScroll: true
});

new SamplePanel({
title: 'Mix and match icon sizes to create a huge unusable toolbar',
tbar: [{
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'
}]
},{
xtype: 'buttongroup',
// boxMinHeight: 500,
// boxMinWidth: 500,
title: 'Other Actions',
items: [{
scale: 'large',
iconCls: 'add'
}]
}]
});
});

ts-gbtec
19 Mar 2010, 9:58 AM
No ideas?