同时更新网格和表单

Question

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

当我更新记录时，我打算同时更新网格和表格（在 store.sync() 之前）。

知道怎么做吗？

就我的 fiddle 而言，在更新（编辑按钮）之后，只有在您单击另一个网格行并再次单击已编辑的行时，表单才会更新。

Fiddle: https://fiddle.sencha.com/#fiddle/12v7

已编辑：查看评论。 https://fiddle.sencha.com/#fiddle/1303

Answer 1

使用数据绑定：Fiddle

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

    }
});

同时更新网格和表单

Update grid and form simultaneously

javascript

forms

grid

extjs

extjs5