Question

此代码将容器放在面板的顶部。在ipad上运行时看起来很糟糕。我希望它成为设备的中心。有人可以帮我吗？

这是我的代码。

Ext.define（'Mistfly.view.SignupPanel'，{

extend: 'Ext.Panel',
xtype: 'signupPanel',

config: {
    id: 'registerationform',
    items: [

        {
            xtype: 'container',
            title: 'Registration Form',
            layout: {
                type: 'vbox',
                pack: 'center'
            },
            items:[

            {
                xtype: 'fieldset',
                title: 'Registration Form',

                items: [
                    {
                        xtype: 'textfield',
                        label: 'Username',
                        labelWrap: true,
                        name:'username',
                        id: 'usrName',
                        placeHolder: 'Enter Username'
                    },
                    {
                        xtype: 'passwordfield',
                        label: 'Password',
                        labelWrap: true,
                        name: 'password',
                        id:'pwd',
                        placeHolder: 'Enter Password'
                    },
                    {
                        xtype: 'emailfield',
                        label: 'Email',
                        labelWrap: true,
                        name: 'email',
                        id:'mail',
                        placeHolder: 'email@example.com'
                    }
                    ]
            }
                ]
        },
        {
            xtype: 'container',
            layout: {
                type: 'hbox',
                pack: 'center'
            },
            items:[
                {
                    xtype: 'button',
                    itemId: 'save',
                    width: '20%',
                    text: 'Save',
                    action: 'submitFormAction'
                }
                ]
        }
        ]

}

}）;

Answer 1

您可以通过CSS将容器置于面板中心。例如，您可以尝试：

.panel {
   float:left;
   width:100%;
}

.panel .container {
   width:90%;
   display:table;
   margin: 0 auto;
}

我希望这有帮助。

Answer 2

查看这个小提琴https://fiddle.sencha.com/#fiddle/51t

需要注意的事项

如果您希望您的容器（带有字段集）位于屏幕的中心，则需要将其父级的布局设置为“适合”。（在你的情况下，它是你的SignupPanel）。这样您就可以指示子项占100％的父项。请注意，如果您有多个子组件，则通常不会应用此布局。
您还必须移动容器内的按钮。

我想将容器放在面板中心

2 个答案: