TriggerField with two triggers, TwinTriggerField with tooltips

Twin Trigger and Twin Trigger Combobox in ExtJS, 

How to give qtip / quicktip / tooltip to Twin Trigger Field

In ExtJS, there is a class Ext.form.TwinTriggerField (though its an abstract class) which is used to create objects of TwinTrigger, and can be extended to form n-trigger field. 
Depending upon the requirement it can be easily, modified. Basically DateField and ComboBox are the examples of single trigger Textfield.


Simple TwinTriggerField 


Here is sample code how to use basic TwinTriggerField (which is basically a Textfield with two triggers/buttons which can be assigned different handlers) -

new Ext.form.TwinTriggerField({
 id : 'twintrigger',
 fieldLabel : "TwinTrigger",
 //Custom icon-classes for triggers
 trigger1Class : 'x-form-clear-trigger',
 //trigger2Class : 'customTriggerIcon',
 
 //Enable Key events over textfield
 enableKeyEvents : true,
 //Separate Trigger handlers
 onTrigger1Click : function(field) {
  Ext.Msg.alert("Trigger 1", "Trigger One!!!");
 },
 onTrigger2Click : function(field) {
  Ext.Msg.alert("Trigger 2", "Trigger Two!!!");
 },
 listeners : {
  render : function(c) {
   //To set Trigger qtips, qtitles
   c.triggers[0].set({
      qtitle : "<b>Trigger One</b>",
      qtip : "Trigger One Action"
     });
   c.triggers[1].set({
      qtitle : "<b>Trigger Two</b>",
      qtip : "Trigger Two Action"
     });
  }
 }
})

As Ext.form.TwinTriggerField is extended from TriggerField and which in turn extended from Textfield, we will only get Textfield related ability.

Combo / Date Twin Trigger Fields - 

If you want to have TwinTriggerField for ComboBox or DateField (i.e. any such extended class of TriggerField class). we need create our own custom twintriggerfield extending any of above desired class.


e.g. If you want to have TwinTriggerField class which works as ComboBox on one trigger click. or if you want to have TwinTriggerField class which works as DateField on one trigger click. Here is a simple ux class which shows how to do it.

//Twin Trigger Field with ComboBox
Ext.ux.TwinCombo = Ext.extend(Ext.form.ComboBox, {
 initComponent : Ext.form.TwinTriggerField.prototype.initComponent,
 getTrigger : Ext.form.TwinTriggerField.prototype.getTrigger,
 initTrigger : Ext.form.TwinTriggerField.prototype.initTrigger,
 onTrigger2Click : Ext.form.ComboBox.prototype.onTriggerClick,
 trigger2Class : Ext.form.ComboBox.prototype.triggerClass
});
//For Date Field with two triggers
Ext.ux.TwinDate = Ext.extend(Ext.form.DateField, {
 initComponent : Ext.form.TwinTriggerField.prototype.initComponent,
 getTrigger : Ext.form.TwinTriggerField.prototype.getTrigger,
 initTrigger : Ext.form.TwinTriggerField.prototype.initTrigger,
 onTrigger2Click : Ext.form.DateField.prototype.onTriggerClick,
 trigger2Class : Ext.form.DateField.prototype.triggerClass
});

Twin Trigger Field ToolTip

Although there are many ways to give qtips to any field in ExtJS, I will cover two of them.

For trigger field with single trigger - 

//just add triggerConfig config property to field
triggerConfig : {
 tag: "img", 
 src: Ext.BLANK_IMAGE_URL, 
 cls: "myCutomIcomClass",
 qtip :"my qtip",
 qtitle : "my qtip title"
}

For twin triggerfield - 

//Add listener to twintriggerfield
render : function(c) {
 //To set Trigger qtips, qtitles
 c.triggers[0].set({
  qtitle : "<b>Trigger One</b>",
  qtip : "Trigger One Action"
 });
 c.triggers[1].set({
  qtitle : "<b>Trigger Two</b>",
  qtip : "Trigger Two Action"
 });
}

Here is an example how to use twintrigger, along with output screenshot-

Ext.onReady(function() {
 
 //Twin Trigger Field with ComboBox
 Ext.ux.TwinCombo = Ext.extend(Ext.form.ComboBox, {
  initComponent : Ext.form.TwinTriggerField.prototype.initComponent,
  getTrigger : Ext.form.TwinTriggerField.prototype.getTrigger,
  initTrigger : Ext.form.TwinTriggerField.prototype.initTrigger,
  onTrigger2Click : Ext.form.ComboBox.prototype.onTriggerClick,
  trigger2Class : Ext.form.ComboBox.prototype.triggerClass
 });
 
 //Twin Trigger Field with DateField
 Ext.ux.TwinDate = Ext.extend(Ext.form.DateField, {
  initComponent : Ext.form.TwinTriggerField.prototype.initComponent,
  getTrigger : Ext.form.TwinTriggerField.prototype.getTrigger,
  initTrigger : Ext.form.TwinTriggerField.prototype.initTrigger,
  onTrigger2Click : Ext.form.DateField.prototype.onTriggerClick,
  trigger2Class : Ext.form.DateField.prototype.triggerClass
 });
 
 Ext.QuickTips.init();
 //Turn on validation errors beside the field globally
 Ext.form.Field.prototype.msgTarget = 'under';

 var fp = new Ext.FormPanel({
   frame : true,
   title : 'TwinTriggerField Examples',
   labelWidth : 150,
   width : 600,
   labelSeperator : '',
   renderTo : document.body,
   bodyStyle : 'padding:0 10px 0;',
   id : 'twinTriggerFieldFormPanel',
   items : [new Ext.form.TwinTriggerField({
     id : 'app_iduxtwintrigger2',
     anchor : '95%',
     labelSeparator : '',
     allowBlank : false,
     fieldLabel : "Text Twin Trigger",
     //Custom icon-classes for triggers
     trigger1Class : 'x-form-clear-trigger',
     //trigger2Class : 'customTriggerIcon',
     
     //Enable Key events over textfield
     enableKeyEvents : true,
     //Separate Trigger handlers
     onTrigger1Click : function(field) {
      Ext.Msg.alert("Trigger 1", "Trigger One!!!");
     },
     onTrigger2Click : function(field) {
      Ext.Msg.alert("Trigger 2", "Trigger Two!!!");
     },
     listeners : {
      render : function(c) {
       //To set Trigger qtips, qtitles
       c.triggers[0].set({
          qtitle : "Trigger One",
          qtip : "Trigger One Action"
         });
       c.triggers[1].set({
          qtitle : "Trigger Two",
          qtip : "Trigger Two Action"
         });
      }
     }
    }),new Ext.ux.TwinCombo({
     id : 'TwinCombo',
     readOnly : false,
     fieldLabel : "Combo Twin Trigger",
     anchor : '95%',
     labelSeparator : '',
     validationEvent : false,
     validateOnBlur : false,
     trigger1Class : 'x-form-clear-trigger',
     //trigger2Class : 'uploadTriggerIcon',
     store : new Ext.data.SimpleStore({
      fields : ['pageName'],
      data : [["ABCD"],["XYZ"],["PQRS"]]
     }),
     displayField : 'pageName',
     valueField : 'pageName',
     mode : 'local', 
     allowBlank : false,
     forceSelection : true,
     triggerAction : 'all',
     selectOnFocus : true,
     editable : false,
     enableKeyEvents : true,
     onTrigger1Click : function(field) {
      //e.g. Clear field value 
      Ext.getCmp('TwinCombo').setValue("");
     },
     //If Trigger 2 handler is specified, then it will be same as normal twin trigger
     //wherein on both trigger we are handling/performing our own action
     listeners : {
      render : function(c) {
       c.triggers[0].set({
          qtitle : "Trigger One",
          qtip : "Trigger One Action"
         });
       c.triggers[1].set({
          qtitle : "Trigger Two",
          qtip : "Trigger Two Action"
         });
      }
     }
    }),new Ext.ux.TwinDate({
     id : 'dateField',
     fieldLabel : "Date Twin Trigger",
     anchor : '95%',
     labelSeparator : '',
     validationEvent : false,
     validateOnBlur : false,
     allowBlank : false,
     trigger1Class : 'x-form-clear-trigger',
     //trigger2Class : 'uploadTriggerIcon',
     enableKeyEvents : true,
     //Trigger 1 Handler
     onTrigger1Click : function(field) {
      //e.g. Clear field value 
      Ext.getCmp('dateField').setValue("");
     },
     //If Trigger 2 handler is specified, then it will be same as normal twin trigger
     //wherein on both trigger we are handling/performing our own action
     listeners : {
      render : function(c) {
       c.triggers[0].set({
          qtitle : "Trigger One",
          qtip : "Trigger One Action"
         });
       c.triggers[1].set({
          qtitle : "Date Trigger",
          qtip : "Choose Date"
         });
      }
     }
   })]
  });

 fp.show();
});

Here is how it would look like -

enjoy:-)