Ext.application({
launch: function() {
var vp = Ext.create('Viewport'),
txt = vp.down('textfield'),
lbl = vp.down('label');
// Comment out/uncomment the case
// which you want to test
// In the first case we use 'on'
txt.on('change', lbl.changeHandler, lbl);
// In the second case we use 'mon'
//lbl.mon(txt, 'change', lbl.changeHandler, lbl);
}
});
Ext.define('Viewport', {
extend: 'Ext.container.Viewport',
layout: 'vbox',
items : [{
// Here you type original text.
xtype: 'textfield',
width: 200
}, {
// Label listens to 'change' event of the textbox,
// copies new value in its own field and prints it
// to the browser's console.
xtype : 'label',
cls : 'label',
listeners: {
destroy: function() {
console.log('Label is destroyed');
}
},
changeHandler: function(field, newValue) {
this.setText(newValue);
console.log(newValue);
}
}, {
// Button destroys the label.
xtype : 'button',
text : 'Destroy Label',
listeners: {
click: function() {
Ext.destroy(this.prev('label'));
this.setDisabled(true);
}
}
}]
});
.label {
border: 1px solid lightgray;
margin-bottom: 5px;
padding: 2px 4px;
height: 22px;
width: 200px;
}
External resources loaded into this fiddle: