Question

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

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

为此有两种方式

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

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

包含高度和可滚动配置的代码段

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: /[\d\s: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: /[\d\s: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
    }]
});

由于下面字段的错误消息，ExtJS表单UI被破坏

1 个答案: