Можно ли использовать Ext.Resizable для элемента width: 100%?

Question

Когда я применяю Ext.Resizable с параметрами wrap: true, handles: 's' к Ext.form.TextArea с width: 100%, текстовая область теряет свою ширину. Более конкретно, ширина сбрасывается на sth. как ширина по умолчанию в пикселях. Можно ли просто сделать Ext.Resizable, просто не касаясь ширины и работать только на высоте элемента? Я проверил, что неприкосновение к ширине будет работать в принципе нормально, заменив (в FireBug) явную ширину в текстовой области и обернув div обратно на 'width: 100%'.

Я пытаюсь добиться эффекта, аналогичного текстовой области вопроса / ответа SO, размер которой можно изменить по высоте.

Answer 1

Попробуйте это:

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 2

Вот мой хакерский подкласс, который я в конце концов использовал.

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

Использование из пользовательского подкласса Ext.form.TextArea (хотя я думаю, что оно может использоваться как обычно Ext.Resizable для произвольного элемента):

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

Answer 3

Не привязывает параметр, с layout:'fit' на панели и anchor:'100%' на текстовой области ширина должна оставаться на уровне 100%.

Недостатком является то, что вам необходимо обернуть все элементы в панели и, возможно, также использовать компоненты ext (например, Ext.form.Textarea)

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