ExtJS - Get a selected value of a grid on a click of a button

Question

I am a newbie to Ext JS so I am finding a little difficulty in getting this simple logic.

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.

Code is as below:

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) {


        }

      });

I'm getting a error:

Uncaught TypeError: Cannot read property 'getSelectionModel' of undefined

What am I doing wrong to gt this simple thing?

Thnaks in advance !

Answer 1

If you want to retrieve your component with Ext.getCmp, then replace:

itemId: 'PlantTab'

with:

id: 'PlantTab'

in your grid config.

id is global, itemId is scoped within the parent container.