Est-il possible d'utiliser Ext.Resizable sur un élément 'width: 100%'?

Question

Lorsque j'applique Ext.Resizable avec les paramètres wrap: true, handles: 's' à Ext.form.TextArea avec width: 100%, la zone de texte perd sa largeur. Plus précisément, la largeur est réinitialisée à sth. comme la largeur par défaut en pixels. Est-il possible de faire proprement Ext.Resizable juste pas toucher la largeur du tout et opérer seulement sur la hauteur de l'élément? J'ai vérifié que le fait de ne pas toucher la largeur fonctionnerait bien en remplaçant (dans FireBug) les largeurs explicites sur la zone de texte et en renvoyant div avec 'width: 100%'.

J'essaie d'obtenir un effet similaire à la zone de texte de la question/réponse de SO, qui peut être redimensionnée pour la hauteur.

Answer 1

Ne pas ancrer une option, avec layout:'fit' sur un panneau et anchor:'100%' sur la zone de texte, la largeur doit rester à 100%.

L'inconvénient est que vous devez tout envelopper dans un panneau et peut-être utiliser également des composants ext (comme Ext.form.Textarea)

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

Answer 2

Essayez ceci:

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

Voici ma sous-classe hackish que j'ai éventuellement utilisée.

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

Utilisation d'une sous-classe personnalisée de Ext.form.TextArea (bien que je pense qu'il peut être utilisé comme Ext.Resizable normale, pour l'élément arbitraire):

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