ExtJS Customized QuickTip Example

DZone's Guide to

ExtJS Customized QuickTip Example

Tousif Khan

Sep. 18, 14 · Java Zone ·

Free Resource

Like (1)

Comment (0)

Save

{{ articles[0].views | formatCount}} Views

Java-based (JDBC) data connectivity to SaaS, NoSQL, and Big Data. Download Now.

ExtJS comes with a singleton class Ext.QuickTips (alternate name: Ext.tip.QuickTipManager) which provides attractive and customizable tooltips for any element. The QuickTips singleton is used to configure and manage tooltips globally for multiple elements in a generic manner.

Today I am going to demonstrate how we can use this QuickTips to create a customized instruction text which will help our user to enter valid form data in form text field.

To demonstrate this, I am creating a simple login form and n this form we will place a instruction text with image (displayfield component of Ext library), on click or hover of that image we will display a customized Ext.QuickTip with field validation instructions.

Ext.onReady(function () {
  Ext.QuickTips.init();

  var qTip = "<p style='color:blue;font-weight:bold;'>Follow the below instruction to enter valid username</p><dl><dt><b style='color:red;'>Lenght:</b></dt><dd>- Minimum: 4 char</dd><dd>- Maximun: 12 char</dd><dt><b style='color:red;'>Character:</b></dt><dd>- Atleast one numeric char</dd><dd>- Special char not allowed</dd>";

  Ext.create('Ext.form.Panel', {
    width: 400,
    frame: true,
    title: 'Login Form - TechZoo',
    padding: 10,
    fieldDefaults: {
      msgTarget: 'side',
      labelWidth: 75
    },
    defaultType: 'textfield',
    defaults: {
      anchor: '98%'
    },
    items: [{
      xtype: 'displayfield',
      value: '<p>Please make sure you follows all the form validation instruction to successfully submit the form.<img id= "questionQTip" src="images/question_white.png" /></p>',

      afterRender: function() {
        var me = this;
        me.mon(Ext.get('questionQTip'),
          'click',
          function(e,t) {e.stopEvent();},
          me
        );
      },
      listeners: {
        afterrender: function(me, e){
          Ext.QuickTips.register({
            dismissDelay: 5000,
            target: 'questionQTip',
            text  : qTip,
            cls   : 'qBodyStyle',
            width : 200
          });
          Ext.get('questionQTip').dom.style.cursor = 'help';
        }
      }
    },{
      fieldLabel: 'First Name',
      name: 'first',
      allowBlank: false
    },{
      fieldLabel: 'Last Name',
      name: 'last',
      allowBlank: false
    }],
    dockedItems: [{
      xtype: 'toolbar',
      dock: 'bottom',
      ui: 'footer',
      items: [{
        xtype: 'tbfill'
      },{
        text: 'Cancel'
      },{
        text: 'Submit Form'
      }]
    }],
    renderTo: 'output'
  });
});

Click of mouseover to question image and you will see following output.

Output: