Up function not working in event handler on element
<p>I have the following code below which works as I would expect:</p>

<pre><code>var container = Ext.create('Ext.Container', {
                    html: 'Click Me!',
                    listeners: {
                        click: {
                            element: 'el',
                            fn: function() {
                                Ext.Msg.alert('Test', 'It was clicked!');
                             }
                         }
                     }
                 });

Ext.create('Ext.panel.Panel', {
    itemId: 'mainContainer',
    renderTo: Ext.getBody(),
    border: false,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [container]
});
</code></pre>

<p>In this example, I'm just alerting some nonsense message, but I would actually like to get the itemId of the parent container using the 'up()' method, however it does not work as I would expect. For example if i change the click handler to this:</p>

<pre><code>click: {
    element: 'el',
    fn: function() {
        console.log(this.up('panel'));
    }
}
</code></pre>

<p>then 'null' is logged. How come I cant use the up() function here and is there a way to change this code so I can use it?</p>