CODEWITHSUNDEEP
extjstextarea
user319799
user319799

Reputation:

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

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.

Upvotes: 2

Views: 3510

Answers (3)

user319799
user319799

Reputation:

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 });

Upvotes: 1

Evan Trimboli
Evan Trimboli

Reputation: 30082

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(),

    });
});

Upvotes: 1

ChrisR
ChrisR

Reputation: 14447

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

Upvotes: 1

Related Questions