Results 1 to 2 of 2

Thread: Resizable TextArea: Handles Not Binding on Initialization

  1. #1

    Default Resizable TextArea: Handles Not Binding on Initialization

    Note: I am using Ext JS 3.2.1 and the issue occurs in Firefox, Chrome, and IE9

    I am trying to create an Ext.form.TextArea with resizable handles and add it to an existing div. I have it working for the most part, however encountered some rather strange behavior.

    On initialization, the unpinned handles appear correctly:

    Attachment 45999

    However, when I get focus of the textarea and start adding newlines to where scrolling occurs, the handles end up scrolling up with the text:

    Attachment 46000

    As you can see, the southern handle has moved up.

    As soon as any of the handles are clicked for the first time, though, they end up snapping to the the textarea and are positioned properly. The route I was going to take was to try and identify whatever event is fixing the handles and then forcefully call that during initialization. This seems kind of hacky though, and I'd much rather get some feedback to see if I'm doing something wrong.

    Here is the snippit of code that creates the TextArea, renders it to a div, and wraps it in a Resizeable:

    var legalValuesInput = new Ext.form.TextArea({
        listeners: {
            focus: function(e){
                console.log("text area has focus!");
                e.el.setStyle("background", "#FFF0D6 0 0");
            blur: function(e){
                console.log("text area lost focus!");
                e.el.setStyle("background", "#FFFFFF 0 0");
            change: function(e){
        autoScroll: true,
        id: "legalChoiceValues_"+varId,
        name: "legalChoiceValues_"+varId,
        blankText: true,
        grow: false,
        width: '300',
        height: '150'
    // legalValueDiv is a handle on the div dom element i the textarea to appear in
    legalValuesInput.render(legalValueDiv, 2);
    new Ext.Resizable(legalValuesInput.el, {
        dynamic: false
    Anybody have any ideas or advice?

  2. #2


    A little bit of an update:

    The issue seems to be around the fact that the textarea I'm wrapping is initially hidden in a div.

    If I move the logic that creates the Resizable out of the initial creation method and into the one that unhides the containing div, the resizable handles appear to work. This is the solution I'll probably end up using, although I'll have to check if the textarea is already wrapped, first (right now, every time I toggle the visibility the textarea gets wrapped in another xresizable div)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts