Javascript 同时更新网格和表单

我的应用程序有一个网格和一个表单（用于记录详细信息）

更新记录时，我希望同时更新网格和表单（在store.sync（）之前）

你知道怎么做吗

对于my fiddle，在更新（编辑按钮）之后，只有在单击另一个网格行并再次单击已编辑行时，表单才会更新

小提琴：

编辑：见评论。 使用数据绑定：

---

谢谢你，埃文。在我的小提琴示例中，您的解决方案运行良好。但是，在我的应用程序的另一个网格中，我无法实现相同的解决方案，因为我在网格中使用一个templatecolumn和网格面板中的一个模板。你知道怎么解决这个案子吗？我用另一把小提琴编辑了我的文章来说明这一部分。

Ext.define('ViewerModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.viewermodel',

    stores: {
        mystore: {

            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: ''
            }]
        }
    }
});


Ext.define('APP.HorizontalBox', {
    extend: 'Ext.container.Container',
    xtype: 'layout-horizontal-box',
    width: 800,
    height: 300,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },

    viewModel: {
        type: 'viewermodel'
    },

    items: [{
        xtype: 'grid',
        flex: 1,
        margin: '0 10 0 0',
        bind: {
            store: '{mystore}',
            selection: '{user}'
        },

        columns: [{
            text: 'Name',
            dataIndex: 'name',
            flex: 1
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 2
        }, {
            text: 'Phone',
            dataIndex: 'phone',
            flex: 2
        }],

        tbar: [{
            xtype: 'form',
            items: [{
                xtype: 'textfield',
                name: 'name',
                bind: '{user.name}'
            }, {
                xtype: 'textfield',
                name: 'email',
                bind: '{user.email}'
            }, {
                xtype: 'textfield',
                name: 'phone',
                bind: '{user.phone}'
            }]
        }],
    }, {
        xtype: 'form',
        flex: 1,
        margin: '0 10 0 0',

        items: [{
            xtype: 'displayfield',
            fieldLabel: 'Name',
            name: 'name',
            bind: '{user.name}'
        }, {
            xtype: 'displayfield',
            fieldLabel: 'Email',
            name: 'email',
            bind: '{user.email}'
        }, {
            xtype: 'displayfield',
            fieldLabel: 'Phone',
            name: 'phone',
            bind: '{user.phone}'
        }]
    }]
});

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('APP.HorizontalBox', {
            renderTo: document.body,
            width: 800,
            height: 400
        });

    }
});