javascriptextjsmessageuser-feedback

Feedback message in extjs


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?


Solution

  • 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