I created an Ext Application, which does not run. But that's not the point of this question. My question is: for given two textAreas I'd like to grow the second one when the first grows
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.TextArea', {
renderTo: Ext.getBody(),
width: 500,
grow: true,
id: 'm1',
});
Ext.create('Ext.form.TextArea', {
renderTo: Ext.getBody(),
width: 500,
grow: true,
id: 'm2',
});
},
});
I was thinking about:
bind: {
height: '{m1.height}',
}
But when trying, that didn't work.
Then I was thinking about:
var el = Ext.get("m1");
var e2 = Ext.get("m2");
e2.setHeight(e1.getHeight());
Then a friend of mine proposed to use the resize event listener.
Any idea how to change the bind to get it work?
Link to the fiddle with the code above: https://fiddle.sencha.com/#view/editor&fiddle/3k6s
Something like this?
Ext.create('Ext.form.FormPanel', {
title: 'Sample TextArea',
width: 400,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textareafield',
grow: true,
name: 'message',
fieldLabel: 'Message',
anchor: '100%',
grow: true,
listeners: {
resize: function(textArea, width, height) {
textArea.nextSibling().setHeight(height)
}
}
}, {
xtype: 'textareafield',
grow: true,
name: 'message',
fieldLabel: 'Message',
anchor: '100%',
grow: true,
}]
});