ExtJS 表单 UI 由于以下字段中的错误消息而中断

Question

我是Sencha架构师和ExtJS的初学者。当我在下面的文本字段中放置错误消息时，由于 sencha 架构师分配vertical-align: middle该文本字段几乎没有向上移动。如何解决这个问题。

https://docs.sencha.com/extjs/6.0.2/guides/components/forms.html

Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
width: 300,
bodyPadding: 10,
defaultType: 'textfield',
items: [{
        xtype: 'textfield',
        flex: 1,
        cls: [
            'customInput',
            'formTextBlack'
        ],
        minHeight: 55,
        fieldLabel: 'Pack Type',
        labelAlign: 'top',
        labelCls: 'blackLabelText14',
        labelSeparator: ' ',
        msgTarget: 'under',
        name: 'packType',
        fieldStyle: 'background:transparent',
        readOnly: false,
        allowBlank: false,
        allowOnlyWhitespace: false
    },
    {
        fieldLabel: 'Last Name',
        name: 'lastName'
    },
    {
        xtype: 'datefield',
        fieldLabel: 'Date of Birth',
        name: 'birthDate'
    }
]
});

Answer 1

为此有两种方法

• 使用height和scrollable:'y'或scrollable:true form组件。在这种情况下，当消息分别显示/隐藏时error表单的可滚动高度将自动增加/减少。请参考这个工作小提琴的方式。
• 没有height和scrollable form元件。在这种情况下，形式高度将消息显示/隐藏时自动增加/减少error分别。请参考此工作摆弄这种方式。

我希望这能帮助您或指导您实现您的要求。

具有高度和可滚动配置的代码片段

Ext.create('Ext.form.Panel', {
    renderTo: document.body,
    title: 'User Form',
    height: 350,
    scrollable: 'y',//true
    width: '100%',
    bodyPadding: 10,
    defaults: {
        flex: 1,
        anchor: '100%',
        labelSeparator: '',
        margin: '10 20',
        minHeight: 55,
        xtype: 'textfield',
        labelAlign: 'top',
        allowBlank: false,
        msgTarget: 'under' // location of the error message
    },
    items: [{
        fieldLabel: 'Last Login Time',
        name: 'loginTime',
        regex: /^([1-9]|1[0-9]):([0-5][0-9])(s[a|p]m)$/i,
        maskRe: /[ds:amp]/i,
        invalidText: 'Not a valid time.  Must be in the format "12:34 PM".'
    }, {
        fieldLabel: 'First Name',
        name: 'firstName'
    }, {
        fieldLabel: 'Middle Name',
        allowBlank: true,
        name: 'firstName'
    }, {
        fieldLabel: 'Last Name',
        name: 'lastName'
    }, {
        fieldLabel: 'Email',
        name: 'email'
    }, {
        xtype: 'datefield',
        fieldLabel: 'Date of Join',
        name: 'joinDate',
        invalidText: '"{0}" not valid.enter value should be like  "{1}" .' // custom error message text
    }, {
        xtype: 'datefield',
        fieldLabel: 'Date of Birth',
        name: 'birthDate',
        invalidText: '"{0}" bad. "{1}" good.' // custom error message text
    }]
});

没有高度和可滚动配置的代码片段

Ext.create('Ext.form.Panel', {
    renderTo: document.body,
    title: 'User Form',
    width: '100%',
    bodyPadding: 10,
    defaults: {
        flex: 1,
        anchor: '100%',
        labelSeparator: '',
        margin: '10 20',
        minHeight: 55,
        xtype: 'textfield',
        labelAlign: 'top',
        allowBlank: false,
        msgTarget: 'under' // location of the error message
    },
    items: [{
        fieldLabel: 'Last Login Time',
        name: 'loginTime',
        regex: /^([1-9]|1[0-9]):([0-5][0-9])(s[a|p]m)$/i,
        maskRe: /[ds:amp]/i,
        invalidText: 'Not a valid time.  Must be in the format "12:34 PM".'
    }, {
        fieldLabel: 'First Name',
        name: 'firstName'
    }, {
        fieldLabel: 'Middle Name',
        allowBlank: true,
        name: 'firstName'
    }, {
        fieldLabel: 'Last Name',
        name: 'lastName'
    }, {
        fieldLabel: 'Email',
        name: 'email'
    }, {
        xtype: 'datefield',
        fieldLabel: 'Date of Join',
        name: 'joinDate',
        invalidText: '"{0}" not valid.enter value should be like  "{1}" .' // custom error message text
    }, {
        xtype: 'datefield',
        fieldLabel: 'Date of Birth',
        name: 'birthDate',
        invalidText: '"{0}" bad. "{1}" good.' // custom error message text
    }]
});