javascript - ExtJS - 单击按钮即可获取网格的选定值

Question

我是 Ext JS 的新手，所以我发现获得这个简单的逻辑有点困难。

我在选项卡面板中有一个网格。我在此网格的 和 处添加了两个按钮“添加”和“更新”。单击“添加”后，我想查看所选行的值。

代码如下:

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


        }

      });

我收到错误:

Uncaught TypeError: Cannot read property 'getSelectionModel' of undefined

我做错了什么来完成这个简单的事情？

提前致谢!

Answer 1

如果您想使用 Ext.getCmp 检索组件，则替换:

itemId:'PlantTab'

与:

id: 'PlantTab'

在你的网格配置中。

id 是全局的，itemId 的范围在父容器内。