PDA

View Full Version : How to have left, center and right button in the same toolbar



medmathieu
8 Oct 2013, 10:36 PM
Hi,

I search a way to have button in the left, in the center and in the right.

For the moment I have:



xtype: 'toolbar',
region: 'north',
items:[
{button1},
{button2},
{button3},
{button4},

{tbfill},
{tbtext},

{tbfill},
{button5},
]


Accordling to the user rights I can have more or less buttons in the left.
I want force the tbtext to be centered.
tbfill is not the good solution.

Is it possible to create 3 containers in the toolbar and place buttons in these containers.
Or there is another solution.

Thank in advance

Farish
8 Oct 2013, 11:06 PM
I dont know about center but I can tell you how to place buttons on left and right. E.g.:



items:
[
button1, // on left
button2, // on left
'->', // pushes next items to the extreme right
button3 // on right
]

ettavolt
10 Oct 2013, 1:17 AM
'->' is just an alias for tbfill.
You can have tbtext only (without tbfill's), just configure it with flex:1. Then you can center it's content with css.
However, this won't place text exactly at the center of toolbar - only in the center of whitespace. You may try to make text a floating component, matching the width of toolbar, but I've not sure that you will be able to properly specify z-index.

medmathieu
10 Oct 2013, 9:23 PM
To solve my probleme I add a tbfill in the right with the width of all addionned button width.
It's not a really good solution but my text is better centered:




xtype: 'toolbar',
region: 'north',
items:[
{button1},
{button2},
{button3},
{button4},

{tbfill},
{tbtext},

{tbfill},
{tbfill, width: 3 * buttonWidth /*4 button to the left - 1 button to the the right*/ },
{button5}
]