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

Question

好吧考虑下面的测试代码，用extjs 6.5 modern编写。

 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 种方式达到您需要的结果

通过使用 ViewModel 和 binding 配置

您可以直接将 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'
                }]
            }]
        });
    }
});

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

sencha, Grid not update automatically when a store is updated

gridview

extjs

data-binding

datastore

extjs6-modern