ExtJS: двухстороннее связывание между Grid & Form

Question

Я пытаюсь выучить ExtJS и как бы застрял на месте. Я хочу создать экран с сеткой вверху и формой внизу. Я хочу связать их друг с другом, чтобы при выборе строки в сетке поля формы заполнялись (с одной и той же записью в сетке), а когда я что-либо изменял в сетке или форме, обновлялась другая сторона.

Пока что у меня есть вид с сеткой и формой. У меня есть магазин, который предоставляет данные в сетке. Я застрял здесь. Как сделать двухстороннее связывание между формой и сеткой. Я попробовал Google и нашел несколько образцов здесь и здесь, но все они являются односторонним обязательным. т.е. если я сделаю следующее на сетке:

           listeners: {

                selectionchange: function(model, records) {
                    var rec = records[0];
                    var form = Ext.getCmp('chartofaccountsForm');
                    form.loadRecord(rec);
                }
            }

он только заполняет форму текущей выбранной записью, но когда я обновил запись в форме, сетка не обновляется.

Может ли кто-нибудь помочь мне, указав мне правильное направление? Любой учебник или сообщение в блоге будет очень полезно

Answer 1

Попробуйте этот пример:

Ext.widget('container',{
        width: 600,
        hight: 800,
        renderTo: Ext.getBody(),
        viewModel: {
            formulas: {
                selection: {
                    bind: '{g.selection}',
                    get: function(selection){
                        return selection;
                    }
                }
            }
        },
        items: [
            {
                xtype: 'grid',
                title: 'Grid',
                reference: 'g',
                store: {
                    type: 'store',
                    fields: ['id', 'name'],
                    data: [{id: 1, name: 'foo'}, {id: 2, name: 'bar'}]
                },
                columns: [
                    {dataIndex: 'id', header: 'ID'},
                    {dataIndex: 'name', header: 'Name'}
                ]
            },
            {
                xtype: 'form',
                title: 'Form',
                items: [
                    {
                        xtype: 'displayfield',
                        fieldLabel: 'ID',
                        bind: '{selection.id}'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Name',
                        bind: '{selection.name}'
                    }
                ],
                bind: {
                    hidden: '{!selection}'
                }
            }
        ]

    });

https://fiddle.sencha.com/