sencha，更新商店时网格不会自动更新

Question

请考虑以下使用 extjs 6.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 分配给您的组件

   store:'sections' //In that case you store should be created
   

在这个FIDDLE中，我使用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'
                }]
            }]
        });
    }
});