Question

在以sencha 6.5 modern编写的应用程序中，我有一个在小部件的面板标题内被“调用”的视图模型，在面板中具有简单的配置：

{
    xtype: 'grid',
    layout: 'fit',
    flex: 1,

    store: {
        type: 'entry',
    },
    viewModel: 'entryoverview',

    columns:[
        {
            text: 'event',
            cell: {
                xtype: 'widgetcell',
                widget: {

                    xtype: 'panel',
                    collapsible: true,
                    collapsed: true,
                    collapseToolText: 'ikke',
                    bind: {
                        title: '{showTitle}',

                    },
                }
            }
        },
    ],
}

现在，视图模型如下：

Ext.define('AllSports.view.entry.EntryOverviewViewModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.entryoverview',

    stores: [{
        entrystore: {
            type: 'entry',
        }
    }],

    formulas: {
        showTitle: {
            get: function() {
                debugger;
                let a = this.getStore('entrystore');
                return 'event: ';
            }
        },
    }
});

现在，我注意到该存储为“空”（null），但是我还注意到我正在链接到全局存储，而不是每个单元格都创建一个视图模型。

我想实现的是，网格内的每个“面板”都有自己的视图模型，因此显示就像带有以下内容的列表一样：

event: A
event: B

那么我如何使每个viewmodel都对封闭的网格内的正确“商店条目” /“模型”进行引用？

Answer 1

viewmodel.getStore()返回null

您需要像viewmodel.getStore()一样使用viewmodel.getStore('entrystore')，以便它返回您的entrystore。

viewModel.getStore(key)获取通过商店配置配置的商店。

要在widgetcell内设置面板标题，可以使用painted事件并在该方法内获取记录。之后，您可以使用setTitle()方法设置标题，也可以在此处使用bind配置。

您可以在这里使用 FIDDLE 进行检查。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('Entry', {

            extend: 'Ext.data.Store',

            alias: 'store.entry',

            fields: [{
                name: 'eventName',
                type: 'string'
            }],

            data: [{
                eventName: 'A'
            }, {
                eventName: 'B'
            }]
        });

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

            alias: 'viewmodel.entryoverview',

            stores: {
                entrystore: {
                    type: 'entry'
                }
            }
        });

        let grid = Ext.create({
            xtype: 'grid',

            fullscreen: true,

            title: 'Grid Demo',

            layout: 'fit',

            flex: 1,

            viewModel: {
                type: 'entryoverview'
            },

            bind: {
                store: '{entrystore}'
            },

            columns: [{
                text: 'Event',
                flex: 1,
                cell: {
                    xtype: 'widgetcell',
                    widget: {
                        xtype: 'panel',
                        collapsible: true,
                        collapsed: true,
                        collapseToolText: 'ikke',
                        listeners: {
                            painted: function (panel) {
                                let row = panel.up('gridrow');
                                panel.setTitle('event : ' + row.getRecord().get('eventName'));
                            }
                        }
                    }
                }
            }]
        });

        console.log(grid.getViewModel().getStore('entrystore'))
    }
});

为什么`viewmodel.getStore（）`返回null

1 个答案: