extjs - центрирует форму панели на обычной панели - PullRequest
Новая
       7

extjs - центрирует форму панели на обычной панели

3 голосов
/ 21 мая 2010

Я использую extjs и просто пытаюсь решить простую проблему: У меня есть форма с фиксированной шириной. Я хочу центрировать эту форму в пределах обычной Ext.Panel. Я пытаюсь добиться этого 'css-way' - установив для левого и правого поля значение 'auto'.

Но это не работает, кажется, поля просто игнорируются.

Код: 

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

Ответы [ 7 ]

17 голосов
/ 31 августа 2012

Это прекрасно работает для меня в Ext 4

Используйте его на любом контейнере 

    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'center'
    },
    items: [{
        title: 'Centered Panel',
        width: 200,
        height: 200
    }]
3 голосов
/ 17 апреля 2011 
    style: {
        marginLeft: 'auto',
        marginRight: 'auto'
    },
2 голосов
/ 18 июля 2012

Я только что сделал это с панелью 

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

работал для меня.

1 голос
/ 11 мая 2011

Например, я использую этот макет: 

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;

Моя форма: 

    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',
...
1 голос
/ 25 мая 2010

На панели: 

bodyStyle: "padding: 15px;"  // may also be only padding-left/right
1 голос
/ 21 мая 2010

Вы видели этот образец ? Посмотрите на пример в разделе «Пользовательские макеты / центр».

РЕДАКТИРОВАТЬ: В Ext 3, этот образец был путь. Теперь в Ext 4 лучше всего использовать макет vbox на внешнем контейнере с выравниванием по центру, как показано в ответе A1rPun .

0 голосов
/ 21 мая 2010

Попробуйте следующее на панели: 

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