My problem: how can I create a toolbar with a bottom toolbar with vertical buttons.
Here is my code
var filterActionsButtons = [
{
ui : 'confirm',
text: 'Apply for current view',
},
{
ui : 'action',
text: 'Apply and Save in your profile',
},
{
ui: 'decline',
text: 'Cancel',
handler: function () {
filterPanel.hide();
}
}
];
var filterPanel =
new Ext.Panel({
fullscreen: true,
modal: true,
floating: true,
centered: true,
layout: 'fit',
scroll: 'vertical',
html: '<h2>Agencies</h2>...',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
title:'Manage your filters',
},
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
type: 'vbox',
align: 'strech',
},
height: '100',
items: filterActionsButtons,
}
],
});
This works because I specify height: '100', but I want to specify auto-height or height. When I specify the "auto" property for height, the buttons are small and are aligned to the left, and when I click one, it (the button) is stretched !!!
So, how can I use height: "auto" for a toolbar with buttons with the same width (automatically strech)?