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

Question

当我将Ext.Resizable的参数wrap: true, handles: 's'应用于Ext.form.TextArea且width: 100%时，文本区域会丢失其宽度。更具体地说，宽度被重置为某物。像像素的默认宽度。干净地制作Ext.Resizable是否可以完全不触摸宽度并仅对元素的高度进行操作？我检查了不接触宽度原则上可以正常工作，方法是在文本区域中替换（在FireBug中）显式宽度，并用'宽度：100％'将其包装为div。

我正在尝试实现类似于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 });