Help tip on text field

[SchattenMann]

so its only trigger field :P appended field is the secons field in the line...

Original Files

My Version:

Ext.ux.form.myTriggerField.js

/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux.form');

Ext.ux.form.myTriggerField = Ext.extend(Ext.form.TwinTriggerField, {
    initComponent : function(){
        Ext.ux.form.myTriggerField.superclass.initComponent.call(this);
        this.on('specialkey', function(f, e){
            if(e.getKey() == e.ENTER){
                this.onTrigger2Click();
            }
        }, this);
    },

    validationEvent:false,
    validateOnBlur:false,
    enableKeyEvents:true,
    trigger1Class:'x-form-clear-trigger',
    trigger2Class:'x-form-search-trigger',
    hideTrigger1:true,
    width:180,
    hasSearch : true,
    paramName : 'query',
    tabIndex:999,

    onTrigger1Click : function(){
    
        if(!this.disabled){
            if(this.hasSearch){
                this.el.dom.value = '';
                this.clearHandler();
                this.triggers[0].hide();
                this.hasSearch = false;
            }
        }
    },

    onTrigger2Click : function(){
    
        if(!this.disabled){
            var v = this.getRawValue();
            if(v.length < 1){
                this.triggers[0].hide();
                this.hasSearch = false;
                //return ;
            }
            this.searchHandler();
            this.hasSearch = true;
            this.triggers[0].show();
            }
    }
});

Ext.reg('myTriggerField', Ext.ux.form.myTriggerField);

usage:

{
    xtype:'myTriggerField',
    fieldLabel:'Search',
    name:'search',
    width: 120,
    allowBlank:false,
    clearHandler: function(){
        //your clear function
        //example: this.setValue('');
    },
    searchHandler: function(){
        //your search function
        //like open a grid ou submit a request
    }
}

i thinks its all

[rahesh]

Hi

I override the form fields for showing the tooltips as mentioned in the above posts.But the qtips are coming under my window.My window is of modal type. Anybody know how to show qtips above modal window?.

Thanks in advance


Regards
Rahesh

[ramccune]

First switch on the tips

Ext.QuickTips.init();

Then add the following listener to your text field

listeners: {

afterrender:

function(field){

Ext.QuickTips.register({

target: 'your field id',
text: 'your text',
title: 'your title'
});

}
}

If you try and do this before the field is rendered you will get a dom element does not exist error.

[brian428]

For anyone trying to do with with ExtJS 4.1.x:

CoffeeScript:

Ext.define( "MyApp.view.ToolTipAwareFormField",
  override: "Ext.form.field.Base"
  
  afterRender: ->
    tipText = @qtip
    if( tipText? )
      Ext.tip.QuickTipManager.register(
        target: @
        title: ""
        text: tipText
        enabled: true
        showDelay: 20
      )
    @callParent()    
)

JavaScript:

Ext.define("MyApp.view.ToolTipAwareFormField", {
  override: "Ext.form.field.Base",
  afterRender: function() {
    var tipText;
    tipText = this.qtip;
    if (tipText != null) {
      Ext.tip.QuickTipManager.register({
        target: this,
        title: "",
        text: tipText,
        enabled: true,
        showDelay: 20
      });
    }
    return this.callParent();
  }
});

Then simply specify qtip: "Your tip here" on the form field config.