ExtJS：Grid 和 Form 之间的两种方式绑定答案

【问题标题】：ExtJS: Two way binding between Grid & FormExtJS：Grid 和 Form 之间的两种方式绑定
【发布时间】：2016-03-16 15:22:06
【问题描述】：

我正在尝试学习 ExtJS 并且有点卡在一个地方。我想创建一个顶部有网格，底部有表格的屏幕。我想将它们相互绑定，以便当我从网格中选择一行时，填充表单字段（在网格中使用相同的记录），并且当我更改网格或表单中的任何内容时，另一侧会更新。

到目前为止，我有一个带有网格和表单的视图。我有一个向网格提供数据的商店。我被困在这里。如何在表单和网格之间进行双向绑定。我尝试了谷歌并找到了一些示例here 和here，但它们都是一种方式绑定。即如果我在网格上执行以下操作：

           listeners: {

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

它仅使用当前选定的记录填充表单，但是当我更新表单中的记录时，网格不会更新。

谁能帮我指出正确的方向？任何教程或博客文章都会非常有帮助

【问题讨论】：

标签： javascript extjs extjs6-classic

【解决方案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/#fiddle/179d

【讨论】：