title: Ext.bind does not see function in ExtJS
body: <p>I am trying to mod the Portlet example and port it into our program. The code looks like this:</p>
  
  <pre><code>Ext.create('Ext.container.Viewport',{
              id: 'app-viewport', //creates viewport
              layout: {
                  type: 'border',
                  padding: '0 5 5 5' // pad the layout from the window edges
              },
  
              onPortletClose: function(portlet) {
                  this.showMsg('"' + portlet.title + '" was removed');
              },
  
              showMsg: function(msg) {
                  var el = Ext.get('app-msg'),
                      msgId = Ext.id();
  
                  this.msgId = msgId;
                  el.update(msg).show();
  
                  Ext.defer(this.clearMsg, 3000, this, [msgId]);
              },
  
              clearMsg: function(msgId) {
                  if (msgId === this.msgId) {
                      Ext.get('app-msg').hide();
                  }
              },
  
              items: [{
                  id: 'app-header',
                  xtype: 'box',
                  region: 'north',
                  height: 40,
                  html: 'Ext Welcome'
              },{
                  xtype: 'container',
                  region: 'center',
                  layout: 'border',
                  items: [{
                      id: 'app-options', //Creates the Options panel on the left
                      title: 'Options',
                      region: 'west',
                      animCollapse: true,
                      width: 200,
                      minWidth: 150,
                      maxWidth: 400,
                      split: true,
                      collapsible: true,
                      layout:{
                          type: 'accordion',
                          animate: true
                      },
                      items: [{
                          html: content,
                          title:'Navigation',
                          autoScroll: true,
                          border: false,
                          iconCls: 'nav'
                      },{
                          title:'Settings',
                          html: content,
                          border: false,
                          autoScroll: true,
                          iconCls: 'settings'
                      }]
                  },{
                      id: 'app-portal', //Creates the panel where the portal drop zones are.
                      xtype: 'mainpanel',
                      region: 'center',
                      items: [{
                          id: 'col-1', //Each column represents a drop zone column. If we add more there are more created and width gets adjusted accordingly
                          items: [{
                              id: 'portlet-1',
                              title: 'Portlet 1',
                              html: content,
                              listeners: {
                                  'close': Ext.bind(this.onPortletClose, this)
                          },{
                              id: 'portlet-2',
                              title: 'Portlet 2',
                              html: content,
                              listeners: {
                                  'close': Ext.bind(this.onPortletClose, this)
                              }
                          }]
                      },{
                          id: 'col-2',
                          items: [{
                              id: 'portlet-3',
                              title: 'Portlet 3',
                              html: content,
                              listeners: {
                                  'close': Ext.bind(this.onPortletClose, this)
                              }
                          }]
                      },{
                          id: 'col-3',
                          items: [{
                              id: 'portlet-4',
                              title: 'Portlet 4',
                              html: content,
                              listeners: {
                                  'close': Ext.bind(this.onPortletClose, this)
                              }
                          }]
                      }]
                  }]
              }]
          });
  </code></pre>
  
  <p>The problem is that Ext.bind cannot read the <code>onPortletClose</code> function and the browser gives me a:</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'apply' of undefined</code> error. I checked the stack and essentially in the Ext.bind(fn,scope) the <code>fn</code> is undefined and thus it cannot read the handler function. The difference between my application and in the example is that I add this directly into a JSP's <code>Ext.onReady()</code> whereas in the example all of this is added through a <code>Ext.apply(this, {...})</code>. I'm really confused. I tried all kinds of gimmicks to force the scope on the viewport but it seems that whatever is inside <code>Ext.bind()</code> loses contact with outside or something. I've used <code>Ext.bind()</code> before and it went fine although it was inside an <code>initComponent</code> configuration. Is that mandatory? If no then what is the problem?</p>