title: ExtJS - Get a selected value of a grid on a click of a button
body: <p>I am a newbie to Ext JS so I am finding a little difficulty in getting this simple logic.</p>
  
  <p>I have a Grid in a tab panel. I have added two buttons 'Add' and 'Update' at the and of this grid. On click of 'Add', I would like to see the value of selected row.</p>
  
  <p>Code is as below:</p>
  
  <pre class="lang-js prettyprint-override"><code>Ext.define('XYZ.view.PlantInformation', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.plantinformation',
  
        requires: [
          'XYZ.view.PlantInformationOldViewModel1',
          'Ext.tab.Panel',
          'Ext.tab.Tab',
          'Ext.grid.Panel',
          'Ext.grid.column.Column',
          'Ext.view.Table',
          'Ext.toolbar.Spacer'
        ],
  
        viewModel: {
          type: 'plantinformation'
        },
        height: 500,
        width: 800,
        layout: 'fit',
        title: 'Plant Information',
        defaultListenerScope: true,
  
        items: [{
          xtype: 'tabpanel',
          activeTab: 0,
          items: [{
              xtype: 'panel',
              scrollable: 'true',
              title: 'Plant',
              items: [{
                xtype: 'gridpanel',
                itemId: 'PlantTab',
                scrollable: true,
                bodyBorder: true,
                bind: {
                  store: 'PlantStore'
                },
                columns: [{
                  xtype: 'gridcolumn',
                  dataIndex: 'ID_PLANT',
                  text: 'Plant ID'
                }, {
                  xtype: 'gridcolumn',
                  dataIndex: 'DS_PLANT',
                  text: 'Plant Name',
                  flex: 1
                }],
                dockedItems: [{
                  xtype: 'panel',
                  dock: 'bottom',
                  width: 100,
                  layout: {
                    type: 'hbox',
                    align: 'stretch',
                    pack: 'end'
                  },
                  items: [{
                    xtype: 'button',
                    flex: 1,
                    text: 'Add',
                    listeners: {
                      click: 'onButtonClick'
                    }
                  }, {
                    xtype: 'tbspacer',
                    flex: 1
                  }, {
                    xtype: 'button',
                    flex: 1,
                    text: 'Update'
                  }]
                }],
                listeners: {
                  select: 'onGridpanelSelect'
                }
              }]
            },
  
          ],
  
          onButtonClick: function(button, e, eOpts) {
            var grid = Ext.getCmp('PlantTab');
            var selection = grid.getSelectionModel().getSelection()[0];
            alert(selection);
          },
  
          onGridpanelSelect: function(rowmodel, record, index, eOpts) {
  
  
          }
  
        });
  </code></pre>
  
  
  
  <p>I'm getting a error: </p>
  
  <blockquote>
    <p><strong>Uncaught TypeError</strong>: Cannot read property 'getSelectionModel' of undefined</p>
  </blockquote>
  
  <p>What am I doing wrong to gt this simple thing?</p>
  
  <p>Thnaks in advance !</p>