Question

有一个表单面板，它就像一个容器。然后我有另一个表单面板，我在其中添加一个文本字段和一个按钮。我需要这个表单面板位于屏幕的中心。文本框的按钮底部（我应该能够将它放在表单中的任何位置。就像Absolute布局一样）。

我的代码如下;并且它不按我想要的方式工作。有人可以看看这个

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.form.Panel',
    alias: 'widget.myview',
    frame: true,
    height: 800,
    hidden: false,
    hideMode: 'visibility',
    id: 'myviewid',
    autoScroll: false,
    bodyPadding: 5,

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'form',
                height: 330,
                width: 400,
                layout: {
                    type: 'absolute'
                },
                bodyPadding: 10,
                title: 'Care Fusion User Login',
                anchor: '250 250',
                items: [{
                    xtype: 'textfield',
                    id: 'name',
                    width: 233,
                    name: 'name',
                    fieldLabel: 'Nmae',
                    growMax: 200,
                    x: 10,
                    y: 30
                } {
                    xtype: 'button',
                    height: 30,
                    width: 256,
                    text: 'Click',
                    x: 240,
                    y: 110
                }]
            }]
        });

        me.callParent(arguments);
    }

});

Answer 1

尝试在外部容器中使用以下布局：

layout: {
  align: 'middle',
  pack: 'center',
  type: 'hbox'
},

然后你将内部形式放在这个外形的中心。

将一个表单面板置于屏幕中心

1 个答案: