ExtJS:Grid & 之间的双向绑定形式 [英] ExtJS: Two way binding between Grid & Form

问题描述

我正在尝试学习 ExtJS，但有点卡在某个地方.我想创建一个顶部有网格、底部有表单的屏幕.我想将它们彼此绑定，以便当我从网格中选择一行时，表单字段会被填充(网格中的记录相同)，并且当我更改网格或表单中的任何内容时，另一边会更新.

I am trying to learn ExtJS and am sort of stuck at a place. I want to create a screen with a grid on top and a form at the bottom. I want to bind them both with each other so that when I select a row from Grid, the form fields are populated (with the same record in the grid) and when I change anything in either grid or form, the other side is updated.

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

So far, I have a view with a grid and a form. I have a store that provides data to the grid. I am stuck here. How to do two way binding between form and grid. I tried google and found a few samples here and here but they all are one way binding. i.e. if I do the following on grid:

           listeners: {

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

它只用当前选择的记录填充表单，但是当我更新表单中的记录时，网格没有更新.

it only populates the form with currently selected record but when I updated the record in form, the grid is not updated.

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

Can anyone help me by pointing me to the right direction? Any tutorial, or blog post would be very helpful

推荐答案

试试这个例子:

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

这篇关于ExtJS:Grid & 之间的双向绑定形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！