Soham Shah Soham Shah - 7 months ago 101
Javascript Question

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

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

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.

Comments