Question

I am developing an application using ExtJs, one of the features is to edit a record already saved. There is a grid where I select the line that I want to edit, and a panel appears with the information to be edited. But one of the attributes that can be edited is another object of my system, called a configuration, and this configuration has an id, which is loaded when you edit the registry. The problem is that when I click on the icon of the grid that lets you edit, the first time the id is retrieved, the second the id does not appear anymore, and the third time displays the following error:’

Uncaught TypeError: Cannot read property 'id' of undefined Grid.js:36
Ext.define.columns.items.handler Grid.js:36
Ext.define.processEvent 
Ext.define.processEvent Table.js:755
fire ext-debug.js:8583
Ext.define.continueFireEvent Observable.js:352
Ext.define.fireEvent Observable.js:323
Ext.override.fireEvent EventBus.js:22
Ext.define.processItemEvent Table.js:844
Ext.define.processUIEvent View.js:475
Ext.define.handleEvent View.js:404
(anonymous function)
Ext.apply.createListenerWrap.wrap 

My code is (when I click edit icon):

icon : Webapp.icon('editar.png'),
tooltip : 'Editar',
handler: function(view, rowIndex, colIndex, item, e) {                      
var record = Ext.getStore('EstacaoStore').getAt(rowIndex);
var form = Ext.create('PanelNovaEstacao');
record.set('modoIgnorar', record.data.modoIgnorar); 
record.set('latitude', record.data.latitude);   
record.set('longitude', record.data.longitude);
record.set('reiniciar', record.data.reiniciar);             
record.set('configuracaoCombo', record.data.configuracao.id);
record.set('ativar', record.data.ativar);
record.set('tipoColetor', record.data.tipoColetor);
form.loadRecord(record);
Ext.create('Ext.window.Window', {
title : 'Cadastro',
layout : 'fit',
modal : true,
width : 500,
height : 350,
items : [ form ]
}).show();              

And ‘PanelNovaEstacao’ code is:

Ext.define('PanelNovaEstacao', {
extend : 'Ext.form.Panel',
title : 'Painel',
initComponent : function() {

    var combo = Ext.create('ComboBoxConfiguration', {
                name : 'configuracao'
            });

    Ext.apply(this, {
        bodyPadding : '10 0 0 10',
        items : [ {
            xtype : 'hiddenfield',
            name : 'id'
        }, {
            xtype : 'hiddenfield',
            name : 'numeroSerieAntigo'
        }, {
            xtype : 'numberfield',
            fieldLabel : 'Número de série',
            name : 'numeroSerie',
            minValue : 0,
            allowBlank : false
        }, combo
        {
            xtype: 'numberfield',
            fieldLabel: 'Latitude',
            name: 'latitude'
        }, {
            xtype: 'numberfield',
            fieldLabel: 'Longitude',
            name: 'longitude'
        },{
            xtype: 'radiogroup',
            fieldLabel : 'Estado',
            items : [ {
                boxLabel : 'Ativo',
                inputValue : true,
                checked: true,
                name : 'ativar'
            }, {
                boxLabel : 'Inativo',
                inputValue : false,
                name : 'ativar'
            } ]
        }, {
            xtype : 'checkbox',
            fieldLabel : 'Modo ignorar',
            name : 'modoIgnorar'
        }, {
            xtype : 'checkbox',
            fieldLabel : 'Reiniciar',
            name : 'reiniciar'
        }, {
            xtype : 'button',
            text : 'Salvar',
            textAlign : 'center',
            action : 'salvar'
        } ]
    });

    this.callParent(arguments);
}

});

ComBoxConfiguration code:

Ext.define('ComboBoxConfiguration', {
extend : 'Ext.form.ComboBox',
store : 'ConfiguracaoStore',
fieldLabel : 'Configurações',
displayField : 'id'

});

Anyone know what might be happening ??
Thanks!

Answer 1

This line is likely causing the issue: record.set('configuracaoCombo', record.data.configuracao.id);

The data that is coming back from the proxy does not have a configuracao property, so accessing it evaluates to undefined, at which point trying to access the sub-property id will lead to the error you are seeing.

Take a look at the data in the EstacaoStore and what’s being returned by the store’s proxy (or however you load it). You’ll likely find a problem there.