title: select row ExtJS6.2 viewport extends grid.panel
body: <p>I am trying to delete a selected row in my Viewport component that extends Ext.grid.panel. The below example allows me to select rows but it is instantiated as a grid.Panel not a Viewport. Is it possible to select a specific row with a viewPort that extends grid.Panel</p>
  
  <p>similar: <a href="https://fiddle.sencha.com/#view/editor&amp;fiddle/2ech" rel="nofollow noreferrer">https://fiddle.sencha.com/#view/editor&amp;fiddle/2ech</a>
  I've had various attempts but I believe my issue is that I cannot grab the grid.</p>
  
  <p>My code</p>
  
  <pre><code>var mainView = Ext.create('Ext.container.Viewport', {
  //extends grid.panel
  extend: 'Ext.grid.Panel',
  
  items: [{
      //xtype is used to re-use components or classes
      xtype: 'grid',
      store: userStore,
      columns: [{
          text: 'Name',
          dataIndex: 'name',
          flex: 1
      }, {
          text: 'Email Address',
          dataIndex: 'email',
          flex: 2
      }, {
          text: 'Phone Number',
          dataIndex: 'phone',
          flex: 2
      }]
  
  }, {
      xtype: 'button',
      text: 'NEW',
      height: 50,
      width: '33%',
      handler: function () {
          var win = Ext.create('innerWindow');
          win.show();
      }
  }, {
      xtype: 'button',
      text: 'VIEW',
      height: 50,
      width: '33%',
      handler: function () {
          var win = Ext.create('innerWindow');
          win.show();
      }
  }, {
      xtype: 'button',
      text: 'DELETE',
      height: 50,
      width: '33%',
      handler: function () {
          let selected = grid.getSelection();
          //want to delete selected row
          //var record = userStore.getAt(0);
          userStore.remove(selected);
      }
  }]
  </code></pre>
  
  <p>});</p>