extjs - centre un formPanel sur un panneau normal

Question

J'utilise extjs et essaye juste de résoudre un problème simple: J'ai un formulaire avec une largeur fixe. Je veux Centrer ce formulaire dans un Ext.Panel normal. J'essaye d'atteindre ce 'css-way' - en réglant la marge gauche et droite sur 'auto'.

Mais cela ne fonctionne pas, il semble que les marges sont simplement ignorées.

Le code:

var curStateForm = new Ext.FormPanel({ 
    title:'test', 
    width:300, 
    bodyStyle:'margin:5px auto 0 auto', 
    items: [edIst, edAdjust, edSumme] 
}); 


var testPanel = new Ext.Panel({ 
    width: '100%', 
    frame:true, 
    items: [curStateForm] 
}); 

Answer 1

Avez-vous vu this sample? Regardez l'exemple sous "Layouts personnalisés/centre".

EDIT: Dans Ext 3, cet exemple était le chemin à parcourir. Maintenant dans Ext 4, il est préférable d'utiliser une disposition vbox sur le conteneur externe avec l'alignement du centre comme indiqué dans A1rPun's answer.

Answer 2

Effectuez les opérations suivantes dans le panneau:

style: { 
    "margin-left": "auto", 
      "margin-right": "auto" 
     }, 

Answer 3

Dans le panneau:

bodyStyle: "padding: 15px;" // may also be only padding-left/right 

Answer 4

style: { 
     marginLeft: 'auto', 
     marginRight: 'auto' 
    }, 

Answer 5

Par exemple, j'utilise cette disposition:

Ext.layout.AbsoluteCenterLayout = Ext.extend(Ext.layout.ContainerLayout, { 
    monitorResize:true, 
    onLayout : function(ct, target){ 
     Ext.layout.AbsoluteCenterLayout.superclass.onLayout.call(this, ct, target); 
     if(!this.container.collapsed){ 
      var sz = (Ext.isIE6 && Ext.isStrict && target.dom == document.body) ? target.getViewSize() : target.getStyleSize(); 
      this.setItemSize(this.activeItem || ct.items.itemAt(0), sz); 
     } 
    }, 
    setItemSize : function(item, size){ 
     if(item && size.height > 0){ // display none? 
      formEl = item.getEl(); 
      var widthCenter = (size.width/2)-(formEl.getWidth()/2); 
      var heightCenter = (size.height/2)-(formEl.getHeight()/2); 
      formEl.setStyle({ 
       left: widthCenter+'px', 
       top: heightCenter+'px', 
       position: 'absolute', 
      }); 
     } 
    } 
}); 
Ext.Container.LAYOUTS['absolutecenter'] = Ext.layout.AbsoluteCenterLayout; 

Ma forme:

Viewport = new Ext.Viewport({ 
       renderTo: Ext.getBody(), 
       layout: 'border', 
       items: [{ 
        region: 'center', 
        xtype: 'panel', 
        layout: 'absolutecenter', 
        baseCls: 'x-plain', 
        items:[{ 
         id: 'form', 
         formId: 'admin-loginform', 
         xtype: 'form', 
         title: 'Authentication', 
         iconCls: 'admin-wnd-authentication', 
         frame: true, 
         autoHeight: true, 
         width: 270, 
         defaultType: 'textfield', 
         labelAlign: 'right', 
... 

Answer 6

Je viens de le faire à un panneau

listeners: { 
    afterlayout : function(container, layout, eOpts) { 
    panel.center(); 
    } 
} 

J'ai travaillé pour moi.

Answer 7

Cela fonctionne parfaitement pour moi, poste 4

utiliser sur tout conteneur

layout: { 
     type: 'vbox', 
     align: 'center', 
     pack: 'center' 
    }, 
    items: [{ 
     title: 'Centered Panel', 
     width: 200, 
     height: 200 
    }]