TextArea with wrap:off?

[emblemparade]

Something like this used to work in Ext JS 3:

                xtype: 'textareafield',
                autoCreate: {
                    tag: 'textarea',
                    spellcheck: 'false',
                    wrap: 'off'
                },

But, not in Ext JS 4. Trading autoCreate with autoEl, which seems to be the new name for the same config option, results in some interesting disasters.

Any ideas on how to allow the same functionality (injecting DOM attributes) in Ext JS 4?

[emblemparade]

After rummaging through the source code, I found this workaround. It actually seems like the old method is no longer supported, because fields are rendered using templates.

First, create a custom template for your textarea:

    var noWrapTextAreaTpl = new Ext.XTemplate(
        '<textarea id="{id}" ',
            '<tpl if="name">name="{name}" </tpl>',
            '<tpl if="rows">rows="{rows}" </tpl>',
            '<tpl if="cols">cols="{cols}" </tpl>',
            '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
            'class="{fieldCls} {typeCls}" ',
            'autocomplete="off" spellcheck="off" wrap="off">',
        '</textarea>',
        {
            compiled: true,
            disableFormats: true
        }
    );

Then, to use it:

                xtype: 'textareafield',
                fieldSubTpl: noWrapTextAreaTpl,

Note that "fieldSubTpl" is undocumented! This does, however, work.

[emblemparade]

And now, here's the same fix for Ext JS 4.1:

    var noWrapTextAreaTpl = Ext.create('Ext.XTemplate',
        '<textarea id="{id}" ',
            '<tpl if="name"> name="{name}"</tpl>',
            '<tpl if="rows"> rows="{rows}"</tpl>',
            '<tpl if="cols"> cols="{cols}"</tpl>',
            '<tpl if="cols"> cols="{cols}"</tpl>',
            '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
            '<tpl if="size"> size="{size}"</tpl>',
            '<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
            '<tpl if="readOnly"> readonly="readonly"</tpl>',
            '<tpl if="disabled"> disabled="disabled"</tpl>',
            '<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
            ' class="{fieldCls} {typeCls}" ',
            '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
            ' autocomplete="off" spellcheck="false" wrap="off">\n',
            '<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>',
        '</textarea>',
        {
            compiled: true,
            disableFormats: true
        }
    );

[mjhaston]

Awesome fix. Thank you.