I'm struggling with my application right 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 the store is loaded, I add the records to the form. Console says it's added, however the fields keep beeing empty.

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

Anyone got Ideas what could 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);
    }
});

Store

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've tried numberfields, textfields as well as changing the data fom with ' to without ' and mixed.... nothing seems to help me.

The fields are rendered before store is loaded (test output still in the code)

I'm really out of ideas here and I've seen many topics, but none fits to my problem or fixes my problem. The form fields always keeps beeing empty.

I'm struggling with my application right 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 the store is loaded, I add the records to the form. Console says it's added, however the fields keep beeing empty.

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

Anyone got Ideas what could 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);
    }
});

Store

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've tried numberfields, textfields as well as changing the data fom with ' to without ' and mixed.... nothing seems to help me.

The fields are rendered before store is loaded (test output still in the code)

I'm really out of ideas here and I've seen many topics, but none fits to my problem or fixes my problem. The form fields always keeps beeing empty.

• javascript
• forms
• extjs
• store

• Ok, looks like "Ext.widget" creates a new widget with a new form, however after changing (updated in source above) it still doesn't work. – Patrick Schumacher Commented Oct 2, 2012 at 20:42

1 Answer 1

I think your issue is that you need to pass a Model record into loadRecord method not the underlying data. So try changing line 3 to

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

As a side note, it's a bit odd to load the entire store just to get at a single record. You might want to explore Model.load( id, {callback config} ) way of loading exact record that you need.