title: extjs button scope
body: <p>I am trying to understand scope in the below scenario. When calling <code>searchTerms</code>, <code>this</code> under the <code>scope:this</code> refers to the <code>searchTerms</code> function rather than the panel itself. It seems to be different from what I observe from other examples. May I know what mistakes did i make?</p>
  
  <pre><code>function searchTerms(){
         var searchGrid = new Ext.grid.GridPanel({
  
          });
  
          var searchPanel = new Ext.form.FormPanel({
              region: 'south',
              height:150,
              items:[
              {
                  xtype: 'textfield',
                  fieldLabel: 'Keywords',
              },{
                  xtype: 'textfield',
                  fieldLabel: 'Label',
              },{
                  xtype: 'datefield',
                  fieldLabel: 'Valid till'
              },new Ext.Button({
                  text: 'crawl',
                  scope: this,
                  handler: function(b,e){
                      Ext.Ajax.request({^M
                          url: '/discovery/tsearch',^M
                          params: {^M
                              keywords: this.items[0].getValue(),
                              label: this.items[1].getValue(),
                              valid: this.items[2].getValue(),
                          },
                      });
                  }
              }),],
          });
  
          var regionPanel = new Ext.Panel({
              title: 'search',
              layout: 'border',
              items: [searchPanel, searchGrid]
          });
  
      return regionPanel;
  }
  </code></pre>