mon

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-gray.css">

CSS

.label {
    border: 1px solid lightgray;
    margin-bottom: 5px;
    padding: 2px 4px;
    height: 22px;
    width: 200px;
}

JavaScript

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