PDA

View Full Version : Toolbar with panels inside ...



armandoxxx
18 Oct 2012, 11:57 PM
Hey ppl

Is it possible to add panel or containers to toolbar ?

I would like to have toolbar in three rows. So many fields and buttons, so putting them in three rows is my only option.
Any help would be appreciated.

Regrds

Armando

sword-it
19 Oct 2012, 12:18 AM
Hi Armandoxxx,



I would like to have toolbar in three rows.


You can achieve this layout by buttongroup class, like -


tbar: [{
xtype: 'buttongroup',
columns: 3,
items: [{
xtype:'button',
text: 'Menu Button'
},{
xtype:'button',
text: 'Cut'
},{
text: 'Copy'
},{
text: 'Paste'
},{
text: 'Format'
},
{
text: 'Reset'
}]
}],



Here is sample example - http://jsfiddle.net/maneeshgo/2cThy/

For more detail read API docs- http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.ButtonGroup

armandoxxx
19 Oct 2012, 1:52 AM
Hey thank you for your reply.

I've checked all those examples. But I have fields like combos and checkboxes on toolbar .. can't handle everything with buttons :(

Regards

Armando

sword-it
19 Oct 2012, 2:40 AM
Try this layout -


tbar: [{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Save',
style: 'margin-right:20px;',
width: 70},
{
xtype: 'label',
text: 'First'},
{
xtype: 'textfield'}

]},
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
style: 'margin-right:20px;',
text: 'Update',
width: 70},
{
xtype: 'label',
text: 'Second'},
{
xtype: 'textfield'}]}
]}]