extjs - centre formPanel sur un panneau

Je suis en utilisant extjs et juste pour essayer de résoudre un problème simple:
J'ai un formulaire avec une largeur fixe. Je veux de Centre de ce formulaire dans un normal Ext.Le panneau.
Je suis en train de réaliser le "css-voie - réglage de la marge de gauche et droite à "auto".

Mais ce n'travail, il semble que les marges sont tout simplement ignorés.

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]
});

OriginalL'auteur Ben | 2010-05-21

  1. 1

    Avez-vous vu cet exemple? Regardez l'exemple dans la section "custom layouts /centre".

    EDIT: En Ext 3, l'échantillon était la voie à suivre. Maintenant en Poste 4, il serait préférable d'utiliser une vbox mise en page sur le récipient externe avec alignement au centre, comme indiqué dans la A1rPun réponse.

    Merci, n'a pas trouvé ça mais je pense que c'est ce que je suis à la recherche d' 😉
    Cette page est très mauvais, la moitié des fragments de code ne fonctionnent pas, et ils ne représentent pas ce qui est sur l'écran !
    L'exemple de l'url n'est plus valide

    OriginalL'auteur Brian Moeskau

  2. 17

    Cela fonctionne parfaitement pour moi en Ext 4

    L'utiliser sur n'importe quel conteneur

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

    OriginalL'auteur A1rPun

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

    OriginalL'auteur aarffy

  4. 2

    J'ai juste fait ce à un panneau

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

    A fonctionné pour moi.

    OriginalL'auteur Diwakar Kuruba

  5. 1

    Dans: panneau de

    bodyStyle: "padding: 15px;"  //may also be only padding-left/right
    Essayé, mais ça n'a pas fonctionné...

    OriginalL'auteur Thevs

  6. 1

    Par exemple, j'utilise cette mise en page:

    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;

    Mon formulaire:

        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',
...

    OriginalL'auteur Padovan

  7. 0

    Essayez les solutions suivantes dans le panneau:

    style: {
    "margin-left": "auto",
            "margin-right": "auto"
       },
    Essayé, mais ça n'a pas fonctionné...

    OriginalL'auteur Natkeeran