Centrer et aligner des boutons

Bonjour,

Je n'arrive pas à centrer et à mettre en ligne mes boutons dans ma fenêtre.
Pourriez- m'aider ?

Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Ext.onReady(function() {
 
    var EnregistrerUnCourrier = new Ext.Button({
 
        id:"EnregistrerUnCourrier",
        text:"Enregistrer un courrier",
        scale:"large"
    })
 
        var RechercherUnDossier = new Ext.Button({
 
        id:"RechercherUnDossier",
        text:"Rechercher un dossier",
        scale:"large"
    })
 
        var Parametrer = new Ext.Button({
 
        id:"Parametrer",
        text:"Paramétrer",
        scale:"large"
 
    })
 
 
 
    var FenAccueil = new Ext.Window({
        id:"FenAccueil",
        //renderTo: 'toto',
        title:"Bienvenue dans le gestionnaire de courrier",
        width:'700px',
        height: '700px',
        items : [EnregistrerUnCourrier, RechercherUnDossier, Parametrer]
    })
    FenAccueil.show();
 
});

Merci

var FenAccueil = new Ext.Window({ /*debut ajout*/ layout:'hbox', layoutConfig: { padding:'5', align:'top'}, /*fin ajout*/ id:"FenAccueil", //renderTo: 'toto', title:"Bienvenue dans le gestionnaire de courrier", width:'700px', height: '700px', /*des truc a rajouter ...*/ items : [{ xtype:'spacer', flex:1 }, EnregistrerUnCourrier,{ xtype:'spacer', flex:1 }, RechercherUnDossier,{ xtype:'spacer', flex:1 }, Parametrer,{ xtype:'spacer', flex:1 }] }) FenAccueil.show();