添加侦听器以向文本字段创建警告消息

Adding a listener to create a warning message to a textfield

本文关键字：创建 警告 消息 字段 文本 侦听器 添加      更新时间：2023-09-26

我有一个组合框和一个文本字段。我正在尝试在文本字段中添加一个警告通知，说明"请输入值"如果从组合框中选择了某些内容。但是，如果从组合框中选择了"3"，我只希望在文本字段上显示警告

有什么办法可以做到这一点吗？我不知道该怎么做。

这是我的组合框和文本字段的代码：

{
                            xtype:'combo',
                            store: ['1','2','3'],
                            triggerAction: 'all',
                            fieldLabel: 'Area',
                            id: 'dcArea',
                            width: 125,
                        },{
                            xtype:'textfield',
                            fieldLabel: 'Mile',
                            id: 'mile',
                            width: 125,
                        }

当然，听众需要在组合中。使用msgTarget自定义错误消息的显示方式。

{
    xtype:'combo',
    store: ['1','2','3'],
    triggerAction: 'all',
    fieldLabel: 'Area',
    // bad practice
    // id: 'dcArea',
    width: 150,
    // <EDIT>
    msgTarget: 'under',
    // </EDIT>
    listeners: {
        change: function(combo, value) {
            // use component query to retrieve the other field
            var textfield = this.up('form').down('#mile');
            if (value === '3') {
                textfield.markInvalid("Please enter value");
            } else {
                textfield.clearInvalid();
            }
        }
    }
},{
    xtype:'textfield',
    fieldLabel: 'Mile',
    itemId: 'mile',
    width: 150
}

编辑 使用组合框的 msgTarget 属性配置错误消息的显示方式（请参阅更新的代码示例）。

在extjs中，这是添加侦听器的方法，在这种情况下on change会有所帮助。样本：

              {
                    xtype:'textfield',
                    fieldLabel: 'Mile',
                    id: 'mile',
                    width: 125,
                    name: 'myMiles'
                    listeners: {
                         'change': function() {
                          console.log('you changed the text of this input field');
                          var value = Ext.getCmp('mile').getValues().myMiles;
                          if(value == 3)
                          {
                            alert('You selected 3');
                          }
                        }
                    }
              }
相关文章：