Feedback message in extjs

Question

Here is my requirement:

I have a form, with 3 fields. If user changes the 3rd field to a specific value, I need to reset the 1st field and I want to give a feedback message adjacent to the 1st field with a custom message.

I understand there are different kind of Message Box is ExtJS like Prompt, Confirm, OK, Cancel etc. But I just want my message to appear and fade away in 2 seconds automatically. Can this be achieved using any ExtJS component?

Answer 1

I'd recommend using Ext.tip.QuickTipfor something like this.

Ext.create('Ext.tip.QuickTip', {
    id: 'myquicktip',
    hideDelay: 2000,
    header: false
});

Ext.create('Ext.panel.Panel',{     
    title: 'Panel',     
    layout: 'hbox',
    height: 200,
    width: 600,     
    items: [{
            xtype: 'textfield',
            id: 'field1',

        }, {
            xtype: 'textfield',
            id: 'field2',
        }, {
            xtype: 'textfield',
            id: 'field3',
            listeners: {
                change: function(){
                    var field1 = Ext.getCmp('field1'),
                        tip = Ext.getCmp('myquicktip');                                                       

                    field1.setValue('');

                    tip.update('field1 has been cleared');
                    tip.showBy(field1)
                }
            }
        }
    ],      
    renderTo: Ext.getBody()
});

Here is a fiddle link too: https://fiddle.sencha.com/#fiddle/9pd

Answer 2

Depending on how exactly it should look like, I'd use either one of

• Ext.form.field.Display
• Ext.form.Label
• Ext.tip.Tip
• Ext.tip.QuickTip

They all can be decorated with Ext.util.Animate mixin, if builtin animations are not animated enough.