[OPEN] [#669] TextArea resizable config

Page 1 of 2 12 LastLast
  1. #1

    [OPEN] [#669] TextArea resizable config

    On version 2.x, it was possible to define TextArea resizable as shown below:

    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:TextArea ID="TextArea1" Width="300" Grow="true" GrowMin="38" GrowMax="110" runat="server">
            <ResizableConfig ID="ResizableConfig1" Handles="South" runat="server" />
        </ext:TextArea>
    </body>
    </html>
    On version 3.1.0, it does not work anymore.
    Last edited by Daniil; Jan 30, 2015 at 2:33 PM. Reason: [OPEN] [#669]
  2. #2
    Hi Raphael,

    Thank you for the report!

    Seems a known issue for Sencha.
    http://www.sencha.com/forum/showthread.php?294422

    Created an Issue to track this defect.
    https://github.com/extnet/Ext.NET/issues/669
  3. #3
    Thank you Daniil. Please keep me posted.
  4. #4
    Should this thread be moved to Bugs area?
  5. #5
    Any update or workaround?
  6. #6
    Hello Raphael!

    Sorry, no news from Sencha.

    As for workaround, here's what you can do:
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Resizable TextArea - en3</title>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #textAreaFieldBody {
                /*
                 * Overcomes a problem in css classes:
                 * .x-form-text-field-body-default {
                 * this avoids limiting the textarea width, ignoring its Width= property
                 */
                max-width: 10000px
            }
    
            .x-form-item-label, .x-form-item-body {
                /* this avoids halving the textarea width after a resizer-related hidden element was added to the DOM */
                display: block
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:TextArea ID="TextArea2" runat="server" Width="300" FieldBodyCls="textAreaFieldBody">
            <Listeners>
                <BeforeShow Handler="item.bodyEl.setWidth(item.getWidth());" />
            </Listeners>
        </ext:TextArea>
        <ext:Resizer runat="server" Target="TextArea2" Handles="South" MaxWidth="400" />
    </body>
    </html>
    Notice the override on the CSS classes may break other forms' display. If this is your case, you'll have to fine-tune those overrides to affect only the TextArea component(s) in the page.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Resizer's target must be set to TextArea's inputElement, as shown below:

    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <ext:ResourceManager ScriptMode="Debug" runat="server" />
        <ext:TextArea ID="_txa" Text="Ext.NET" runat="server" />
        <ext:Resizer Target="_txa-inputEl" Pinned="true" Handles="South" MinHeight="150" Height="200" MaxHeight="300" runat="server" />
    </body>
    </html>
  8. #8
    Possible fix
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            Ext.resizer.Resizer.override({
                constructor: function (config) {
                    if (config.target != null) {
                        var target = null;
                        if (Ext.typeOf(config.target) == "string") {
                            target = Ext.global[Ext.net.RM.ns][config.target];
                        }
                        else {
                            target = config.target;
                        }
                        if (target && target.xtype == "textareafield") {
                            config.target = target.inputEl.id;
                        }
                    }
                    this.callParent(arguments);
                }
            });
        </script>
    </head>
    <body>
        <ext:ResourceManager ScriptMode="Debug" runat="server" />
        <ext:TextArea ID="_txa" Text="Ext.NET" runat="server" />
        <ext:Resizer Target="_txa" Pinned="true" Handles="East" MinWidth="150" Width="200" MaxWidth="300" runat="server" />
    </body>
    </html>
    Last edited by RaphaelSaldanha; Feb 11, 2016 at 3:48 PM.
  9. #9
    In addition, setting TextArea's ResizableConfig has no effect.
    <ext:TextArea ID="_txa" Text="Ext.NET" runat="server">
        <ResizableConfig Pinned="true" Handles="East" MinWidth="150" Width="200" MaxWidth="300" runat="server" />
    </ext:TextArea>
    it's possible to overcome the issue by initializing Resizable on TextArea's render, as shown below (lines 24 to 32)
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            Ext.resizer.Resizer.override({
                constructor: function (config) {
                    if (config.target != null) {
                        var target = null;
                        if (Ext.typeOf(config.target) == "string") {
                            target = Ext.global[Ext.net.RM.ns][config.target];
                        }
                        else {
                            target = config.target;
                        }
                        if (target && target.xtype == "textareafield") {
                            config.target = target.inputEl.id;
                        }
                    }
                    this.callParent(arguments);
                }
            });
    
            Ext.override(Ext.form.field.TextArea, {
                afterRender: function () {
                    var me = this;
                    me.callParent(arguments);
                    if (me.resizable != null) {
                        me.initResizable(me.resizable);
                    }
                }
            });
        </script>
    </head>
    <body>
        <ext:ResourceManager ScriptMode="Debug" runat="server" />
        <ext:TextArea ID="_txa" Text="Ext.NET" runat="server">
            <ResizableConfig Pinned="true" Handles="East" MinWidth="150" Width="200" MaxWidth="300" runat="server" />
        </ext:TextArea>
    </body>
    </html>
    Note: Ext.resizer.Resizer.constructor override is the same presented on post #8.
    Last edited by RaphaelSaldanha; Feb 11, 2016 at 4:18 PM.
  10. #10
    The example provided above breaks if ResourceManager's ScriptMode is set to Release.

    Click image for larger version. 

Name:	ta002.png 
Views:	49 
Size:	884 Bytes 
ID:	24424

    I have already noticed difference beween Debug and Release mode before: http://forums.ext.net/showthread.php...l=1#post225891

    Thanks in advance
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Issue with Resizable Textarea
    By amitpareek in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 14, 2014, 11:04 PM
  2. Resizable control
    By bilgecooliteforum in forum 1.x Help
    Replies: 1
    Last Post: May 07, 2010, 4:16 AM
  3. Replies: 1
    Last Post: Mar 17, 2010, 7:39 AM
  4. [CLOSED] Resizable & TextArea Grow="true"
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 21, 2010, 8:19 AM
  5. [CLOSED] Resizable
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 14, 2009, 8:10 AM

Posting Permissions