当存储更新时，网格不会自动更新。

Question

考虑下面的测试代码，用extjs6.5现代版编写。

 Ext.define('myApp.store.Sections', {
     extend: 'Ext.data.Store',
     storeId: 'Sections',
     alias: 'store.sections',

     fields: ['name', 'event'],

     data: {
         items: [{
             name: 'blah',
             event: 'a'
         }, {
             name: 'hello',
             event: 'a'
         }, {
             name: 'world',
             event: 'a'
         }, {
             name: 'foo',
             event: 'b'
         }, {
             name: 'bar',
             event: 'b'
         }]
     },

     proxy: {
         type: 'memory',
         reader: {
             type: 'json',
             rootProperty: 'items'
         }
     }
 });
 Ext.create({
     xtype: 'container',
     title: 'Panel Title',
     iconCls: 'x-fa fa-html5',
     height: 400,
     width: 400,
     fullscreen: true,

     layout: {
         type: 'vbox',
         align: 'stretch'
     },
     items: [{
         xtype: 'grid',
         name: 'master',
         store: {
             type: 'sections',
         },
         layout: 'fit',
         flex: 1,
         plugins: {
             gridcellediting: {
                 selectOnEdit: true,
                 triggerEvent: 'tap',
             }
         },
         columns: [{
             text: 'name',
             dataIndex: 'name',
             flex: 1,
             editor: {
                 xtype: 'textfield',
             }
         }]
     }, {
         xtype: 'grid',
         name: 'firstslave',
         store: {
             type: 'sections',
         },
         layout: 'fit',
         flex: 1,
         columns: [{
             text: 'name',
             dataIndex: 'name',
             flex: 1
         }]
     }, {
         xtype: 'combobox',
         name: 'secondslave',
         displayField: 'name',
         valueField: 'name',
         store: {
             type: 'sections'
         }
     }]
 });

可以通过第一个网格修改存储项。如果以这种方式修改存储，则在组合框(第二个从站)中可以看到这些更改。

然而，第二个网格没有反映这些更改，在那里项目保持不变，因此网格视图与底层数据不同步。

这一切为什么要发生？这能防止吗？

编辑:我注意到，如果我重新排序网格(通过列菜单)，项目将被更新。

Answer 1

因为您正在为所有组件使用store

store: {
  type: 'sections'
}

因此，在这种情况下，每个组件都有sections存储的新实例。这就是为什么你的变化没有反映出来。

你可以通过使用2种方式达到你所要求的结果。

1. 使用ViewModel和binding配置
2. 您可以直接将storeId分配给组件。 存储：‘区段’//在这种情况下，应该创建存储

在这个小提琴中，我使用ViewModel和binding创建了演示。

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('myApp.store.Sections', {
            extend: 'Ext.data.Store',
            storeId: 'Sections',
            alias: 'store.sections',

            fields: ['name', 'event'],

            data: {
                items: [{
                    name: 'blah',
                    event: 'a'
                }, {
                    name: 'hello',
                    event: 'a'
                }, {
                    name: 'world',
                    event: 'a'
                }, {
                    name: 'foo',
                    event: 'b'
                }, {
                    name: 'bar',
                    event: 'b'
                }]
            },

            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        Ext.define('MainModel', {
            extend: 'Ext.app.ViewModel',

            alias: 'viewmodel.main',

            stores: {
                myStore: {
                    type: 'sections'
                }
            }
        });

        Ext.create({
            xtype: 'container',
            title: 'Panel Title',
            iconCls: 'x-fa fa-html5',
            //height: 400,
            fullscreen: true,

            viewModel: {
                type: 'main'
            },

            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'grid',
                title: 'Grid 1',
                name: 'master',
                bind: '{myStore}',
                layout: 'fit',
                flex: 1,
                plugins: {
                    gridcellediting: {
                        selectOnEdit: true,
                        triggerEvent: 'tap'
                    }
                },
                columns: [{
                    text: 'name',
                    dataIndex: 'name',
                    flex: 1,
                    editor: {
                        xtype: 'textfield'
                    }

                }]
            }, {
                xtype: 'grid',
                title: 'Grid 2',
                name: 'firstslave',
                bind: '{myStore}',
                layout: 'fit',
                flex: 1,
                columns: [{
                    text: 'name',
                    dataIndex: 'name',
                    flex: 1
                }]
            }, {
                xtype: 'panel',
                title: 'Combo panel',
                items: [{
                    xtype: 'combobox',
                    name: 'secondslave',
                    displayField: 'name',
                    valueField: 'name',
                    bind: {
                        store: '{myStore}'
                    },
                    margin:'0 0 30 0'
                }]
            }]
        });
    }
});