Is it possible to use Ext.Resizable on a 'width: 100%' element?

Question

When I apply Ext.Resizable with parameters wrap: true, handles: 's' to an Ext.form.TextArea with width: 100%, the text area loses its width. More specifically, the width is reset to sth. like default width in pixels. Is it possible to cleanly make Ext.Resizable just not touch width at all and operate on element's height only? I checked that not touching width would work fine in principle by replacing (in FireBug) explicit widths on the text area and wrapping div back with 'width: 100%'.

I'm trying to achieve effect similar to SO's question/answer text area, which can be resized for height.

Answer 1

Isn't anchoring an option, with layout:'fit' on a panel and anchor:'100%' on the textarea the width should stay at 100%.

The drawback is that you are required to wrap everything in a panel and possibly also use ext components (like Ext.form.Textarea)

ref: http://www.sencha.com/deploy/dev/examples/form/anchoring.html

Answer 2

Try this:

Ext.onReady(function(){

    var el = Ext.getBody().createChild({
        tag: 'div',
        style: 'width: 600px;'
    });

    var area = new Ext.form.TextArea({
        renderTo: el,
        style: 'width: 100%'
    });

    new Ext.Resizable(area.el, {
        wrap: true,
        handles: 's',
        height: area.getHeight(),

    });
});

Answer 3

Here is my hackish subclass I eventually used.

ExtOverrideUtils = {
    setSizeIgnoreWidth: function (width, height, animate)
    {
        this.setHeight ((typeof width == 'object' ? width.height : height), animate);
    },

    intercept: function (func, overrides)
    {
        return function ()
            {
                var  value = func.apply (this, arguments);

                if (value) {
                    for (var name in overrides)
                        value[name] = overrides[name];
                }

                return value;
            };
    }
}

NoWidthResizable = Ext.extend (Ext.Resizable,
    {
        constructor: function (el, config)
        {
            el = Ext.get (el);

            el.setSize = ExtOverrideUtils.setSizeIgnoreWidth;
            el.wrap    = ExtOverrideUtils.intercept (el.wrap, { setSize: ExtOverrideUtils.setSizeIgnoreWidth });

            NoWidthResizable.superclass.constructor.call (this, el, config);
        }
    });

Usage from a custom subclass of Ext.form.TextArea (though I guess it can be used just as normal Ext.Resizable, for arbitrary element):

this._resizer = new NoWidthResizable (this.el,
                                      { wrap: true,
                                        handles: 's',
                                        minHeight: 30,
                                        pinned: true,
                                        dynamic: true });