Results 1 to 2 of 2

Thread: Add warning to text field

  1. #1
    Sencha Premium User
    Join Date
    Dec 2010
    Posts
    279
    Answers
    8

    Default Answered: Add warning to text field

    I have a text field in a form that I would like to display a warning when a user changes its value or the field is in focus. It would look like a validation error warning but I do not want it to cause validation to fail. How could I achieve this?

    I tried this:

    Code:
                    {
                        xtype: 'textfield',
                        anchor: '95%',
                        fieldLabel: 'DBA',
                        name: 'dba',
                        inputAttrTpl: [
                            'data-qtip='Some warning''
                        ],
    But it only shows when the mouse is over the field. I need it to show and stay visible while the field in in focus.

  2. Code:
    Ext.define('MyController', {
        extend: 'Ext.app.ViewController',
        alias: 'controller.mycontroller',
    
    
        onFocus: function (cmp) {
            Ext.create('Ext.tip.ToolTip', {
                target: cmp.el,
                html: 'Warning Text!!!',
                anchor: 'left',
                dismissDelay: 0,
                showDelay: 0,
                autoHide: false,
                id: 'ttt'
            }).show();
        },
    
    
        onFocusLeave: function (cmp) {
            Ext.getCmp('ttt').destroy()
        }
    
    
    });
    
    
    Ext.create({
        xtype: 'form',
        controller: 'mycontroller',
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'textfield',
            padding: 10,
            listeners: {
                focusenter: 'onFocus',
                focusleave: 'onFocusLeave'
            }
        }]
    });

    FIDDLE

  3. #2
    Sencha User
    Join Date
    Feb 2017
    Posts
    15
    Answers
    3

    Default

    Code:
    Ext.define('MyController', {
        extend: 'Ext.app.ViewController',
        alias: 'controller.mycontroller',
    
    
        onFocus: function (cmp) {
            Ext.create('Ext.tip.ToolTip', {
                target: cmp.el,
                html: 'Warning Text!!!',
                anchor: 'left',
                dismissDelay: 0,
                showDelay: 0,
                autoHide: false,
                id: 'ttt'
            }).show();
        },
    
    
        onFocusLeave: function (cmp) {
            Ext.getCmp('ttt').destroy()
        }
    
    
    });
    
    
    Ext.create({
        xtype: 'form',
        controller: 'mycontroller',
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'textfield',
            padding: 10,
            listeners: {
                focusenter: 'onFocus',
                focusleave: 'onFocusLeave'
            }
        }]
    });

    FIDDLE

Similar Threads

  1. [OPEN] Empty Text Warning Styling Uses Malformed CSS
    By Josh Johnson in forum Sencha Touch 2.x: Bugs
    Replies: 1
    Last Post: 18 Jun 2013, 5:23 AM
  2. form field warning
    By MichaelOstrovsky in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 1 Mar 2010, 12:28 PM
  3. Replies: 7
    Last Post: 10 May 2009, 9:40 AM
  4. Showing a warning text when the grid is empty
    By BernardChhun in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 16 Feb 2007, 10:56 AM

Posting Permissions

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