preventing word-wrap in textarea

I have the below configuration for a textarea, while the vertical scrollbars appear as the text increases, the horizontal scrollbar does not appear as the length of a sentence increases. I do not want the word wrapping and want it to horizontally scroll. Searching documentation and forums did not help.

Code:

---

    {
            xtype: 'textarea',
            name: 'inputText',
            colspan: 3,
            height: 300,
            width: 400,
            allowBlank: false
        }

---

Is there something very common that I am missing here?

I don't believe you can. Implementation of textarea differs between browsers. For instance, Fx does not word wrap while IE6/7 do.

TextArea onRender

Code:

---

wordWrap: false;

...

this.el.setOverflow('auto');
        if (this.wordWrap === false) {
            if (!Ext.isIE) {
              this.el.set({wrap:'off'})
            } else {
              this.el.dom.wrap = "off";
            }
        }
        if (this.preventScrollbars === true) {
            this.el.setStyle("overflow", "hidden");
        }

---

Quote:

---

Originally Posted by jgarcia@tdg-i.com

I don't believe you can. Implementation of textarea differs between browsers. For instance, Fx does not word wrap while IE6/7 do.

---

Not sure about all browsers, but you should be able to set wrap on/off and the textarea does a horizontal scroll for long lines instead of wrapping.

The above code looks promising.

Based on the post above and this post I've created the following override to extend the TextArea and add the wordWrap option which seems to work fine for me. But so I'm putting it out there for anyone else to use and or comment on...

Code:

---

Ext.override(Ext.form.TextArea, {
        initComponent: Ext.form.TextArea.prototype.initComponent.createSequence(function() {
                Ext.applyIf(this, {wordWrap: true});
        }),
       
        onRender: Ext.form.TextArea.prototype.onRender.createSequence(function(ct, position){
                this.el.setOverflow('auto');
                if (this.wordWrap === false) {
                        if (!Ext.isIE) {
                                this.el.set({wrap:'off'})
                        } else {
                                this.el.dom.wrap = 'off';
                        }
                }
                if (this.preventScrollbars === true) {
                        this.el.setStyle('overflow', 'hidden');
        }                           
    })
});

---

Solution(For Ext 4 and above) would be

textarea.inputEl.dom.wrap = "off";

and for earlier versions

textarea.el.dom.wrap = "off";


Write this in the after render listener of text area .it should work. :)

best of luck :)

Thanks a lot Jagadeesha :) It Works :)