ExtJS：Grid&形成 [英] ExtJS: Two way binding between Grid & Form

问题描述

我正在尝试学习ExtJS，并且被困在一个地方。我想创建一个屏幕，顶部有一个网格，底部是一个窗体。我想将它们绑定在一起，以便当我从Grid中选择一行时，填充表单域（在网格中具有相同的记录），当我以任何一个网格或形式更改任何内容时，另一方将被更新。

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

 监听器：{
 
 selectionchange：function（model，记录）{
 var rec = records [0]; 
 var form = Ext.getCmp（'chartofaccountsForm'）; 
 form.loadRecord（rec）; 
} 
} 
  

它只填充当前所选记录的表单，但是我更新了表单中的记录，网格没有更新。

有人可以通过指向正确的方向帮助我吗？任何教程或博文都将非常有帮助

解决方案

尝试此示例：

  Ext.widget（'container'，{
 width：600，
 hight：800，
 renderTo：Ext.getBody（） 
 viewModel：{
 formula：{
 selection：{
 bind：'{g.selection}'，
 get：function（selection）{
返回选择; 
} 
} 
} 
}，
项目：[
 {
 xtype：'grid'，
标题：'Grid'，
 reference：'g'，
 store：{
 type：'store'，
 fields：['id'，'name']，
 data：[{id：1，name：'foo'}，{id：2，name：'bar'}] 
}，
列：[
 {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

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

解决方案

Try this example:

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屋！