Gridview sencha，存储更新时网格不会自动更新 考虑下面的测试代码，编写在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' } }] });

可以通过第一个网格修改存储条目。如果以这种方式修改存储，则在组合框（第二个从属）中可以看到更改

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

为什么会发生这种情况？这能预防吗

编辑：我注意到，如果我对网格重新排序（通过列菜单），项目将被更新。

因为您正在使用所有组件

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

存储：{
类型：“节”
}

因此，在这种情况下，每个组件都有

部分的新实例。这就是为什么你的改变没有反映出来


您可以通过使用两种方法来实现所需的结果

通过使用和
绑定
配置

您可以直接将storeId分配给组件

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


在这个中，我使用
ViewModel
和
绑定创建了演示

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'
                }]
            }]
        });
    }
});

这（
viewmodel:{type:x}
）是否也意味着每个组件都有自己的viewmodel？因此它自己的存储副本？
viewmodel:{type:x}
。它不是在创建新实例。viewmodel是一个概念改变的地方，是整个应用程序中的一个反映，在你使用过的地方，我已经提到了另一种方法，通过提供store id，你也可以使用它。哦，我不是说这个解决方案不好，我只是想理解为什么`store:{type:x}为每个组件创建一个新的存储，但是，对于每个viewmodel，相同的语法并不能做到这一点。没有人用这种方法来定义viewmodel。但对于商店，您有两种方法可以通过别名或商店id分配