PDA

View Full Version : Fit toolbar inside two celspanned table columns



doo
11 Feb 2013, 10:20 AM
Hi everyone,

I came across the following task:
I have a buttongroup with two columns. Inside this I have a toolbar xtype element.



xtype: 'buttongroup',columns: 2,
items:
[
{
xtype: 'toolbar',
border: false,
colspan: 2,
items:
[
{ xtype: 'tbfill'},
{ xtype: 'header', title: 'Label'},
{ xtype: 'tbfill'},
{ xtype: 'button', width:14, height:14, iconCls:'tooltip'}
]
}
]


I would like to have this toolbar as wide as the width of both columns. It seems that the toolbar does not take up the width of both columns. Can someone point me in the right direction?

---
So the task is similar to this example:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.ButtonGroup
But the HTML Panel Content should be the same width as the button group.

Any ideas?
Thanks!

slemmon
11 Feb 2013, 11:10 PM
Worked for me in the below example as long as I had included buttons next to the colspan toolbar to build out the columns that the toolbar would span.



Ext.create('Ext.panel.Panel', {
title: 'Panel with ButtonGroup',
width: 300,
height:200,
renderTo: document.body,
bodyPadding: 10,
html: 'HTML Panel Content',
tbar: [{
xtype: 'buttongroup',
columns: 3,
title: 'Clipboard',
items: [{
xtype: 'toolbar',
colspan: 3,
iconCls: 'add',
iconAlign: 'top',
cls: 'btn-as-arrow',
items: [{
text: 'TOP',
flex: 1
}]
}, {
text: 'One',
iconCls: 'add',
iconAlign: 'top',
cls: 'btn-as-arrow'
}, {
text: 'Two',
iconCls: 'add',
iconAlign: 'top',
cls: 'btn-as-arrow'
}, {
text: 'Three',
iconCls: 'add',
iconAlign: 'top',
cls: 'btn-as-arrow'
}]
}]
});