View Full Version : Resizable TextArea: Handles Not Binding on Initialization

25 Sep 2013, 1:29 PM
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:


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:


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?

26 Sep 2013, 9:46 AM
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)