ExtJS4: как показать сообщение об ошибке проверки рядом с текстовым полем, combobox и т.д.

Ответ 1

msgTarget: 'side' Добавить значок ошибки справа от поля, отображая сообщение только во всплывающем меню.

если вы внимательно прочтете документацию, еще один вариант для msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget

[element id] Добавьте сообщение об ошибке непосредственно в innerHTML указанного элемента. вам нужно добавить "td" в правую часть элемента управления динамически с идентификатором. то, если вы укажете msgTarget: 'element id', он будет работать.

Ответ 2

msgTarget: 'elementId' может работать, но он кажется очень ограниченным, особенно если вы хотите, чтобы несколько экземпляров одного повторно используемого компонента ExtJs (а потому несколько экземпляров одного и того же элемента msgTarget). Например, у меня есть редактор стиля MDI, в котором вы можете открыть несколько редакторов одного типа в интерфейсе вкладки. Он также не работает с itemId или распознает иерархию DOM/контейнеров.

Поэтому я предпочитаю отключить обработку по умолчанию, если я не хочу точно один из встроенных параметров отображения сообщений, установив msgTarget: none, а затем выполнив собственное отображение сообщений, обработав событие fielderrorchange, которое предназначено для именно этот сценарий. В этом случае я могу теперь уважать иерархию моих форм даже с несколькими экземплярами одной и той же формы редактора, поскольку я могу выбрать элемент отображения ошибки относительно редактора.

Вот как я это делаю:

{
    xtype: 'fieldcontainer',
    fieldLabel: 'My Field Label',
    layout: 'hbox',   // this will be container with 2 elements: the editor & the error
    items: [{
        xtype: 'numberfield',
        itemId: 'myDataFieldName',
        name: 'myDataFieldName',
        width: 150,
        msgTarget: 'none',  // don't use the default built in error message display
        validator: function (value) {
            return 'This is my custom validation message. All real validation logic removed for example clarity.';
        }
    }, {
        xtype: 'label',
        itemId: 'errorBox', // This ID lets me find the display element relative to the editor above
        cls: 'errorBox'     // This class lets me customize the appearance of the error element in CSS
    }],
    listeners: {
        'fielderrorchange': function (container, field, error, eOpts) {
            var errUI = container.down('#errorBox');
            if (error) {
                // show error element, don't esape any HTML formatting provided
                errUI.setText(error, false);
                errUI.show();
            } else {
                // hide error element
                errUI.hide();
            }
        }
    }
}

Ответ 3

См. msgTarget конфигурацию элемента управления. msgTarget: 'side' будет помещать сообщение проверки справа от элемента управления.

Ответ 4

Используйте msgTarget 'side' для проверки в правой части и msgTarget 'under' для нижней

     items: [{
                xtype: 'textfield',
                fieldLabel: 'Name',
                allowBlank: false,
                name: 'name',
                msgTarget: 'side',
                blankText: 'This should not be blank!'
            }]

Ответ 5

Вы можете использовать 'msgTarget: [element id]'. Вы должны написать html, чтобы использовать идентификатор элемента вместо itemId. Функция проверки добавляет элемент списка под элементом, который вы задали как "msgTarget". Если вы хотите показать элементы, которые вы хотите для проверки, вы можете передать html вместо простого текста.

{
    xtype: 'container',
    items: [
        {
            xtype: 'textfield',
            allowBlank: false,
            msgTarget: 'hoge'
            blankText: '<div style="color:red;">validation message</div>', // optional
        },
        {
            xtype: 'box',
            html: '<div id="hoge"></div>' // this id has to be same as msgTarget
        }
    ]
}