web-dev-qa-db-fra.com

Comment aligner des éléments d'une barre d'outils à gauche, au milieu, à droite

Comment puis-je avoir les trois régions à gauche, au milieu, à droite dans une barre d'outils? Je sais que je peux utiliser -> pour déclencher le conteneur aligné à droite pour tous les éléments suivants, mais qu'en est-il du centre?

extjsextjs4extjs4.1extjs-mvc
13
seba

Vous pouvez archiver ceci avec une astuce:

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

Notez que:

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

travaille tout de même.

Comment ça marche

-> ou xtype tbfill n'est rien d'autre qu'un composant vide avec une configuration flex: 1.

23
sra
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()
 });
4
Ashok
For Right:    
bbar: ['->',{
                    xtype: 'button',
                    text: 'xyz',

                }]

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

                }]
1
Lucifer

dockedItems: [{ xtype: 'barre d'outils', buttonAlign: 'center', quai: 'top', articles: [{ texte: 'amarré au sommet' }] }]

1
dj song