title: extjs How to get a grid
body: <p>In Designer I set my grid name to equal MyGrid</p>
  
  <p>On clicking the button addRecord is called, it fails where rows is attemting to get an undefined grid.</p>
  
  <p>How do I define this MyGrid so that it references the grid within the panel?</p>
  
  <pre><code>Ext.define('MyApp.view.MyPanel', {
      extend: 'MyApp.view.ui.MyPanel',
  
      initComponent: function() {
          var me = this;
          me.callParent(arguments);
  
          var button = me.down('button[text=Submit]');
  
           button.on('click', me.onSubmitBtnClick, me);
      },
  
      addRecord: function(myRecordArray) {
  
          var rows = grid.getStore().getRange(); // ERROR happens here
  
              console.log(rows);
  
  
      },
  
      onSubmitBtnClick: function() {
          this.addRecord(["ll", "kk", "mm"]);
      }
  });
  </code></pre>
  
  <p>Chrome Javascript Debugger Console -> </p>
  
  <pre><code>   Uncaught ReferenceError: grid is not defined
  </code></pre>