Results 1 to 9 of 9

Thread: TextArea that doesn't do line break when pressing ENTER

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    119

    Default TextArea that doesn't do line break when pressing ENTER

    How do I override the ENTER event of a TextArea such that pressing ENTER wouldn't do a line break in the text area? Instead it could do the line break only when you press shift+enter.

  2. #2
    Ext User
    Join Date
    Sep 2010
    Location
    Baltimore, MD
    Posts
    66

    Default

    You gotta set
    Code:
    enterIsSpecial = true
    on the component and then override the event "specialkey"

    havent done this yet myself otherwise Id post an example for you. let me know if this works though!

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    119

    Default

    I tried:

    PHP Code:
    Ext.override(Ext.form.TextArea,{
        
    enterIsSpecial true
    }); 
    but that doesn't work, thanks for your reply anyway, Foster.
    Last edited by spor; 20 Dec 2010 at 6:59 AM. Reason: thought it worked, but it didn't

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    119

    Default

    Maybe I was too quick, it doesn't work now...

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    119

    Default

    I have also tried the following in a class that extends TextArea:

    PHP Code:
    fireKey : function(e){
            if(
    e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() != e.ENTER || e.hasModifier()))){
                
    alert('something');
            }
        }
    ....................
    // Following config options on the component
    listeners: {                
                    
    specialkey: {fn: function(fielde){
                        if(
    e.isSpecialKey() && (e.keyCode == e.ENTER)){
                               
    alert('value of field: ' field.getValue());
                           }
                        
                    }}
                }
    ............. 
    However, I still get the line break right before I get the alert message. Is it possible to remove the line break behaviour with enter? I have been studying the source code of TextArea, but can't find anything in the code that adds the line break, am I missing anything?
    Last edited by spor; 21 Dec 2010 at 1:21 AM. Reason: More comment and code

  6. #6
    Sencha User
    Join Date
    Mar 2010
    Posts
    119

    Default

    I just edited my last post to make it more understandable. Any possible tips of why I can't override the line break behavior? Any reply is much appreciated!

  7. #7
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    The event is bubbling up because you're not returning false or calling e.stopEvent()

  8. #8
    Sencha User
    Join Date
    Mar 2010
    Posts
    119

    Default

    Thanks for your reply, mschwartz. In which code block should return false be placed?

    I tried both in listeners and fireKey, but didn't work.

    Also, in the fireKey event, what I get is: e.isSpecialKey() is false, this.enterIsSpecial is true, and e.getKey() is undefined. Don't know the reason for this.

  9. #9
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    I don't know about this specialKey stuff. I've done enableKeyEvents: true and used the keyDown event to look at keys in this kind of case.

    For example, I have an extension I wrote:

    Code:
    Ext.namespace('Ext.ux.form');
    
    Ext.ux.form.AddressField = Ext.extend(Ext.form.TextArea, {
    	height: 40,
    	enableKeyEvents: true,
    	onRender: function() {
    		Ext.ux.form.AddressField.superclass.onRender.apply(this, arguments);
    		var me = this;
    		var el = this.el;
    		
    		el.applyStyles({ textTransform: 'uppercase' });
    		this.mon(el, 'keyup', function() {
    			me.setValue(me.getValue().toUpperCase());
    		});
    		this.on('keydown', function(ta, e) {
    			var key = e.getCharCode();
    			ta.setValue(ta.getValue().toUpperCase());
    			if (key == Ext.EventObject.ENTER) {
    				var v = ta.getValue();
    				if (v.indexOf('\n') !== -1) {
    					e.stopEvent();
    				}
    			}
    		});
    	},
    	getValue: function() {
    		return Ext.ux.form.AddressField.superclass.getValue.apply(this, arguments).toUpperCase();
    	}
    });
    Ext.reg('addressfield', Ext.ux.form.AddressField);
    It's rather simple. It's a 2 line (height 40) textarea that acts as an address field. You enter up to two lines of address, as in:

    1 Main St
    Attn someone

    It also forces uppercase.

Similar Threads

  1. Textarea and line break
    By Ebpo in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 9 Dec 2010, 7:39 AM
  2. Replies: 2
    Last Post: 22 Sep 2010, 5:45 PM
  3. Allow Pressing Enter key in the TextArea in EditorGrid
    By MickeyMiner in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 8 Jul 2010, 6:46 AM
  4. Textarea MaxLength and line break problem
    By oozeroo in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 5 Jun 2008, 5:24 PM
  5. Line break in textarea's value?
    By leandrorc in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 18 May 2008, 9:20 AM

Tags for this Thread

Posting Permissions

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