Page 3 of 3 FirstFirst 123
Results 21 to 24 of 24

Thread: Help tip on text field

  1. #21
    Sencha User
    Join Date
    Mar 2009
    Posts
    227
    Vote Rating
    3
      0  

    Default

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

    Original Files

    My Version:

    Ext.ux.form.myTriggerField.js

    Code:
    /*!
     * 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:

    Code:
    {
        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

  2. #22
    Sencha User
    Join Date
    Oct 2008
    Posts
    39
    Vote Rating
    0
      0  

    Default applying qtip on form elements

    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

  3. #23
    Sencha User
    Join Date
    Jan 2010
    Posts
    4
    Vote Rating
    0
      0  

    Default Adding a tooltip to a text field...

    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.

  4. #24
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Raleigh, NC
    Posts
    501
    Vote Rating
    464
      0  

    Default

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

    CoffeeScript:
    Code:
    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:
    Code:
    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.

Page 3 of 3 FirstFirst 123

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •