Question

当我将带有参数Ext.Resizable的{{1}}应用于wrap: true, handles: 's' Ext.form.TextArea时，文字区域会丢失其宽度。更具体地说，宽度重置为......像默认宽度（像素）。是否可以干净地使width: 100%根本不触及宽度并且仅在元素的高度上操作？我检查过，通过在文本区域中替换（在FireBug中）显式宽度并将Ext.Resizable包裹回'width：100％'，触摸宽度不会正常工作。

我正在尝试实现类似于SO的问题/答案文本区域的效果，可以调整高度的大小。

Answer 1

未锚定选项，在面板上使用layout:'fit'，在textarea上使用anchor:'100%'，宽度应保持在100％。

缺点是您需要将所有内容包装在面板中，并且还可能使用ext组件（如Ext.form.Textarea）

参考：http://www.sencha.com/deploy/dev/examples/form/anchoring.html

Answer 2

试试这个：

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

这是我最终使用的hackish子类。

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

是否可以在'width：100％'元素上使用Ext.Resizable？

3 个答案: