4

私は最初から自分のアプリケーションに苦労しています。

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());
});

ストアがロードされたら、フォームにレコードを追加します。コンソールには追加されたと表示されますが、フィールドは空のままです。

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

誰かがアイデアを得ました何が間違っている可能性がありますか?

コントローラ:

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');
    }
});

ビュー:

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);
    }
});

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'
        }
    }
});

モデル:

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

データ:

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

数値フィールド、テキストフィールド、およびデータ形式を「」から「なし」に変更して混合してみましたが、何も役に立たないようです。

ストアがロードされる前にフィールドがレンダリングされます(テスト出力はまだコード内にあります)

私はここで本当にアイデアがなく、多くのトピックを見てきましたが、私の問題に当てはまるものや問題を解決するものはありません。フォームフィールドは常に空のままです。

4

1 に答える 1

4

あなたの問題は、基になるデータではなく、モデルレコードをloadRecordメソッドに渡す必要があることだと思います。したがって、3行目を次のように変更してみてください

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

ちなみに、単一のレコードを取得するためだけにストア全体をロードするのは少し奇妙です。必要な正確なレコードをロードする方法を検討するModel.load( id, {callback config} )ことをお勧めします。

于 2012-10-02T23:22:34.407 に答える