ExtJS: save loaded, records in form, but not in fields

Question

I am afraid with my application in the beginning.

this.getScoresStore().on('load', function(score, records) { var view = Ext.getCmp('scoreView'); view.down('form').loadRecord(records[0].data); console.log(view.down('form').getRecord()); console.log(view.down('form').getValues()); }); 

After loading the store, I add entries to the form. The console says that it has been added, but the fields remain empty.

 Object { playerOne="301", playerTwo="301" } Object { playerOne="", playerTwo="" } 

Has anyone got any ideas what might be wrong?

Controller:

 Ext.define('Darts.controller.Scores', { extend: 'Ext.app.Controller', views: [ 'score.View', 'score.Hit' ], stores: [ 'Scores' ], models: [ 'Score' ], init: function() { this.getScoresStore().on('load', function(score, records) { var view = Ext.getCmp('scoreView'); view.down('form').loadRecord(records[0].data); console.log(view.down('form').getRecord()); console.log(view.down('form').getValues()); }); this.control({ 'scoreView' : { afterrender: this.formRendered } }); }, formRendered: function(obj) { console.log(obj.down('form').getRecord()); console.log('form rendered'); } }); 

Views:

 Ext.define('Darts.view.score.Hit' ,{ extend: 'Ext.panel.Panel', alias : 'widget.scoreHit', title : 'Hits', score : 'Scores', initComponent: function() { this.items = [ { xtype: 'form', items: [ { xtype: 'textfield', name : 'playerTwo', fieldLabel: 'Player 1' } ] } ]; this.callParent(arguments); } }); Ext.define('Darts.view.score.View' ,{ extend: 'Ext.panel.Panel', alias : 'widget.scoreView', id : 'scoreView', title : 'Player Scores', score : 'Scores', initComponent: function() { this.items = [ { xtype: 'form', items: [ { xtype: 'numberfield', name : 'playerOne', fieldLabel: 'Player 1' }, { xtype: 'textfield', name : 'playerTwo', fieldLabel: 'Player 2' } ] } ]; this.buttons = [ { text: 'Start Game', action: 'start' } ]; this.callParent(arguments); } }); 

Score

 Ext.define('Darts.store.Scores', { extend: 'Ext.data.Store', model : 'Darts.model.Score', autoLoad: true, proxy: { type: 'ajax', api: { read: 'data/scores.json', update: 'data/updateScores.json' }, reader: { type: 'json', root: 'scores', successProperty: 'success' } } }); 

Model:

 Ext.define('Darts.model.Score', { extend: 'Ext.data.Model', fields: ['playerOne', 'playerTwo'] }); 

Data:

 { success: true, scores: [ {id: 1, playerOne: '301', playerTwo: '301'} ] } 

I tried numeric fields, text fields, and also changed fom data with no and mixed ... nothing helps me.

Fields are displayed before loading the repository (test output is still in the code)

I really have no ideas, and I have seen many topics, but no one is suitable for my problem or does not fix my problem. Form fields always remain empty.

Answer 1

I think your problem is that you need to pass the model record to the loadRecord method, not the base data. So try changing line 3 to

.

view.down ('form') loadRecord (records [0]);

As a side note, it’s a little strange to download the entire store to get only one entry. You might want to learn Model.load( id, {callback config} ) how to load the exact record that you need.