1. #1
    Sencha User emblemparade's Avatar
    Join Date
    Nov 2010
    Location
    Chicago, IL
    Posts
    23
    Vote Rating
    3
    emblemparade is on a distinguished road

      0  

    Default TextArea with wrap:off?

    TextArea with wrap:off?


    Something like this used to work in Ext JS 3:

    Code:
                    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?

  2. #2
    Sencha User emblemparade's Avatar
    Join Date
    Nov 2010
    Location
    Chicago, IL
    Posts
    23
    Vote Rating
    3
    emblemparade is on a distinguished road

      1  

    Default


    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:
    Code:
        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:
    Code:
                    xtype: 'textareafield',
                    fieldSubTpl: noWrapTextAreaTpl,
    Note that "fieldSubTpl" is undocumented! This does, however, work.

  3. #3
    Sencha User emblemparade's Avatar
    Join Date
    Nov 2010
    Location
    Chicago, IL
    Posts
    23
    Vote Rating
    3
    emblemparade is on a distinguished road

      1  

    Default


    And now, here's the same fix for Ext JS 4.1:
    Code:
        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
            }
        );

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    316
    Vote Rating
    2
    mjhaston is on a distinguished road

      0  

    Default


    Awesome fix. Thank you.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    84
    Vote Rating
    0
    suamikim is on a distinguished road

      0  

    Default


    Since I was just searching for the same thing I'd like to complement, that since 4.1.0 there's another config option with which this can be done a little easier:

    http://docs.sencha.com/extjs/4.1.3/#...g-inputAttrTpl

    Code:
    Ext.create('Ext.form.field.TextArea', {
        inputAttrTpl: 'wrap="off"'
    });

Similar Threads

  1. preventing word-wrap in textarea
    By nokia786 in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 22 Nov 2012, 12:11 AM
  2. how to add wrap to textarea??
    By vee.ant in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 9 Jul 2009, 4:20 AM
  3. Get TextArea to wrap in GXT
    By mattdarnold in forum Ext GWT: Help & Discussion (1.x)
    Replies: 4
    Last Post: 16 Jun 2009, 5:17 AM
  4. Wrap long single word in a textarea
    By RobSmith in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 10 Jan 2008, 5:17 AM

Thread Participants: 2