Как выровнять элементы на панели инструментов влево, вправо, вправо

Как я могу выделить три области слева, посередине, прямо на панели инструментов? Я знаю, что я могу использовать -> для запуска правильно выровненного контейнера для всех следующих элементов, но как насчет центра?

Ответ 1

Вы можете архивировать это с помощью трюка:

Ext.create('Ext.panel.Panel', {
     title: 'Toolbar Fill Example',
     width: 300,
     height: 200,
     tbar : [
         'Item 1',
         { xtype: 'tbfill' },
         'Item 4',
         { xtype: 'tbfill' },
         'Item 2'
     ],
     renderTo: Ext.getBody()
 });

JSFiddle

Обратите внимание, что:

[
    'Item 1',
    '->',
    'Item 4',
    '->',
    'Item 2'
]

работает все равно.

Как это работает

->, или xtype tbfill - не что иное, как пустой компонент с конфигурацией flex: 1.

Ответ 2

Ext.create('Ext.panel.Panel', {
     title: 'Toolbar Fill Example',
     width: 300,
     height: 200,
     tbarCfg:{
          buttonAlign:'center'  //for center align
         // buttonAlign:'left' //for left align
         // buttonAlign:'right' //for right align
     },
     tbar : [
         'Item 1',
         { xtype: 'tbfill' },
         'Item 4',
         { xtype: 'tbfill' },
         'Item 2'
     ],
     renderTo: Ext.getBody()
 });

Ответ 3

dockedItems: [{ xtype: "панель инструментов", buttonAlign: 'центр', dock: 'top', Предметы: [{ текст: "Пристыкован к вершине" }] }]

Ответ 4

For Right:    
bbar: ['->',{
                    xtype: 'button',
                    text: 'xyz',

                }]

For Left:    
bbar: ['<-',{
                    xtype: 'button',
                    text: 'xyz',

                }]