1. #1
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Answers
    5
    Vote Rating
    6
    yyogev is on a distinguished road

      0  

    Exclamation Unanswered: textarea content change causes form redraw, hiding the writing area

    Unanswered: textarea content change causes form redraw, hiding the writing area


    Hi,

    I have a (rather complicated) form inside the center region of a view port, with a text area field for comments, located at the bottom of the form. The comment field can grow considerably to accommodate long comments. The form has autoScroll:true, as in some resolutions it might not fit fully into the screen.

    When the text area grows big enough so that the form has a vertical scroll bar, I see a strange behavior: when I add text at the end of the comment text (even on the same line), it causes the form to be redrawn, so the part of the text area where I was writing is now below the visible area. It makes writing any more text inside the text area virtually impossible.
    This behavior was seen in Linux in Chrome 22 and IceWeasel 10.0.7 (FireFox). I also saw this in Internet Explorer 8 on Windows XP.

    I found that this happens in the autoSize call on the change event (ext-all-debug.js l.84351, for ExtJS 4.1.2).
    If the text area has grow:true it calls updateLayout(), which results in updateLayout() being done for the form.

    I was able to reproduce this with the following code, using resolution 1024*768 or smaller:


    HTML Code:
    <!doctype html>
    <HTML>
    <HEAD>
    <TITLE>Test</TITLE>
    <META http-equiv='Content-Type' content='text/html; charset=UTF-8' />
        <LINK rel="stylesheet" type="text/css"
        href="/lib/extjs/resources/css/ext-all.css" /> 
        <SCRIPT src="/lib/extjs4/ext-all-debug.js"></SCRIPT> 
        <SCRIPT src="test.js"></SCRIPT> 
            <!-- the ext-js spacer --> 
            <SCRIPT> 
              Ext.BLANK_IMAGE_URL = "/images/ext/default/s.gif";
            </SCRIPT> 
    <SCRIPT >
    Ext.onReady(test);
    </SCRIPT >
    </HEAD>
    <BODY>
    </BODY>
    </HTML>
    Code:
    Ext.ns("sample");
    
    function test()
    {
        var viewport = new Ext.Viewport({
            layout: "border",
            id: "viewport",
            renderTo: Ext.getBody(),
            items: 
            [
                {
                    region: "north",
                    xtype: "panel",
                    border: true,
                    html: "header area",
                    height: Ext.getBody().getHeight() - 300,
                    minHeight: 200
                },
                {
                    region: "center",
                    xtype: "form",
                    autoScroll: true,
                    defaultType: "textfield",
                    items: [
                        {id: "field1", fieldLabel: "Field 1"},
                        {id: "field2", fieldLabel: "Field 2"},
                        {id: "field3", fieldLabel: "Field 3"},
                        {id: "field4", fieldLabel: "Field 4"},
                        {id: "field5", fieldLabel: "Field 5"},
                        {id: "field6", fieldLabel: "Field 6"},
                        {id: "field7", fieldLabel: "Field 7"},
                        {id: "field8", fieldLabel: "Field 8"},
                        {id: "field9", fieldLabel: "Field 9"},
                        {
                            xtype: "textarea",
                            width: 400,
                            grow: true,
                            growMin: 100,
                            growMax: 200
                        }
                    ]
                }
             ]
        });
    
    }
    if I change this code
    Code:
    height: Ext.getBody().getHeight() - 300,
      minHeight: 200
    to be
    Code:
    height: 200
    , this behavior no longer happens.

    Is this a bug or am I doing something wrong here ?
    Yaron Yogev

    IT Software Developer

  2. #2
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Answers
    5
    Vote Rating
    6
    yyogev is on a distinguished road

      0  

    Default Looks like this is the same as bug EXTJSIV-5491

    Looks like this is the same as bug EXTJSIV-5491


    See here:
    http://www.sencha.com/forum/showthre...form-to-scroll
    Yaron Yogev

    IT Software Developer

  3. #3
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Answers
    5
    Vote Rating
    6
    yyogev is on a distinguished road

      0  

    Default Bug reported

    Bug reported


    A bug report was created for this: EXTJSIV-7713
    Yaron Yogev

    IT Software Developer

  4. #4
    Sencha - Training Team
    Join Date
    Nov 2009
    Location
    Washington, DC
    Posts
    62
    Answers
    1
    Vote Rating
    2
    sdruckerfig is on a distinguished road

      0  

    Default


    Yeah, that's a nasty one...I came up with a bit of a kludgy workaround that resizes the textarea after it loses focus...

    Code:
    {
     xtype: 'textareafield',
     maxWords: 250,
     fieldLabel: 'Brief Description',
     labelAlign: 'top',
     name: 'abstractText',
     grow: true,
     vtype: 'wordlimit',
     listeners: {
       focus: {
            fn: function() {  Ext.suspendLayouts(); }
         },
         blur: {
            fn: function() { Ext.resumeLayouts(true); }
          }
       }
     }

  5. #5
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Answers
    5
    Vote Rating
    6
    yyogev is on a distinguished road

      0  

    Default


    Hi @sdruckerfig,

    Unfortunately it does not solve my problem as the text area will not grow when layouts are suspended.

    I can only hope this bug will be handled in the near future, as its handling was already delayed for more than a year.

    Yaron

Thread Participants: 1

Tags for this Thread