Ext

ValterBorges · #1 10-30-2009, 01:48 PM

Hi I'm trying to extend a TextArea to have a tooltip notification when the user reaches the maxlength and is prevented from entering anymore text. I got the following working but as you can you probably tell i'm a noob extender and I would like to know if there is a better and easier way to do this. I want to keep my code as easy to maintain as possible and make my extensions user friend and Ext compliant. I'm also having problems in making the entire tooltip fadeout without hidding it. A grey shadow box is left behind where the tooltip was displayed.

Any comments / feedback is appreciated.

Ext.ux.TextField = Ext.extend(Ext.form.TextField, {
    constructor: function(config) {

        config = Ext.apply({
              
              allowBlank:true
              ,blankText:null
              ,disableKeyFilter:false              
              ,disabled:false
              ,emptyText:null
              ,grow:false
              ,hidden:false
              ,hideLabel:true
              ,inputType:"text"
              ,invalidText:"The current value is not allowed"
              ,msgTarget:"qtip"
              ,preventMark:false
              ,readOnly:false
              ,validateOnBlur:true
              ,style:{fontFamily:'Lucida Sans Typewriter',fontSize:12}
              ,autoCreate: {
                tag: 'input'
                ,type: 'text'
                ,autocomplete: 'off'
               }
              ,enableKeyEvents: true
              ,listeners: {
            // imposes a max length on this textarea even if the value is pasted in.
                'keyup': function () {
                    var value = this.getValue();
                    if (value.length >= this.maxLength) {
                        this.setValue(value.slice(0, value.length - (value.length - this.maxLength)));
                        this.InputTip.html = 'The maximum length is ' + this.maxLength + ' characters';
                        this.InputTip.showBy(this.id, 'tl-bl');
                        
                        var delayTask = new Ext.util.DelayedTask();
                        delayTask.delay(2000,this.HideInputTip,this);
                    }
                 }
              }       
        }, config);

        Ext.ux.TextField.superclass.constructor.call(this, config);
                
    }
    
});

Ext.extend(Ext.ux.TextField, Ext.form.TextField, {
    setValue: function(value) {
        Ext.ux.TextField.superclass.setValue.call(this, value);
    }
    ,setReadOnly: function(bolReadOnly)
    {
      bolReadOnly = Ext.isEmpty(bolReadOnly)? true:bolReadOnly;
      
      if (bolReadOnly) {
         this.addClass('transp');
         this.getEl().setStyle('border','none');
      }
      else
      {
         this.removeClass('transp');
         this.getEl().setStyle('border','1px solid');
      }
      
      this.getEl().readonly = bolReadOnly;
      this.preventMark = bolReadOnly;
    }
    ,InputTip : new Ext.Tip({
         maxWidth: 500
        ,items: [{
            xtype: 'box', 
            autoEl: {tag: 'div', html: '', autoWidth: true, autoHeight: true} 
            }]    
        })    
    ,HideInputTip : function(){
                if(this.InputTip)
                {
                    this.InputTip.el.fadeOut({
                        endOpacity: 0, 
                        easing: 'easeOut',
                        callback: function(){
                            if (this.InputTip)
                            {
                               this.InputTip.hide();
                            }
                        },
                        scope:this,
                        duration: 0.5,
                        remove: false,
                        useDisplay: true
                 }); 
             } 
        }
});

jsakalos · #2 11-02-2009, 06:32 AM

Isn't using maxLength config option enough? In the following example, if the user types more than 10 characters the field becomes invalid (red curly underline) and the tooltip is displayed.

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="ext3/resources/css/ext-all.css">
  <script type="text/javascript" src="ext3/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext3/ext-all-debug.js"></script>
  <title id="page-title">Title</title>
  <script type="text/javascript">
  Ext.BLANK_IMAGE_URL = 'ext3/resources/images/default/s.gif';
  Ext.onReady(function() {
    Ext.QuickTips.init();
    var ta = new Ext.form.TextArea({
        renderTo:Ext.getBody()
        ,maxLength:10
    });
  });
  </script>
</head>
<body>
</body>
</html>

ValterBorges · #3 11-04-2009, 02:45 PM

Couple issues.

If you forget to validate and still allow the data to go to the database you will like hit an error trap and get back a field length message from the database.

If the user cuts and pastes into a text area then you will have to add character counters so they know where exactly 255 characters ends.

jsakalos · #4 11-05-2009, 05:41 AM

The "limiter" can be set up, at least docs say so:

Quote:

Maximum input field length allowed by validation (defaults to Number.MAX_VALUE). This behavior is intended to provide instant feedback to the user by improving usability to allow pasting and editing or overtyping and back tracking. To restrict the maximum number of characters that can be entered into the field use autoCreate to add any attributes you want to a field, for example:

ValterBorges · #5 11-05-2009, 11:42 AM

Yes, I have the limiter setup as such:

           var iTest = new Ext.ux.TextField({
                id:'iTest'
                ,renderTo:'diTest'
                ,width:106
                ,maxLength:50
                ,autoCreate: {
                    tag: 'input'
                    ,type: 'text'
                    ,autocomplete: 'off'
                    ,maxlength:50
               }
            });

However since the user is now limited the message stating they have reached the maximum limit is never displayed, that is why i built the keyup event with the tip to show up when they have reached the limit.

jsakalos · #6 11-05-2009, 03:16 PM

Aaah, I see. So you would need to force to display the "error" tooltip. Could you wrap the code you have now to a workable showcase so we can take a look, run and edit it locally.

ValterBorges · #7 11-05-2009, 09:45 PM

Well, it's not really an error per say more informational so the user knows they've reached a limit, unlike an true form error where the value is not valid and can't be submitted because it would cause a business rule violation.

I will put something together tommorrow.

Thanks again.

Ext

Ext JS

Ext GWT

Ext Core

Support Subscriptions

Training

Community

Ext Solutions

Ext JS

Ext GWT

Help