为什么'viewmodel.getStore()'返回空值

Question

在我的应用程序中，用 sencha 6.5 现代编写，我有一个在小部件面板标题内"调用"的视图模型，面板中有简单的配置：

{
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

那么，如何使每个视图模型都引用封闭网格内正确的"商店条目"/"模型"呢？

Answer 1

viewmodel.getStore()返回空

值

而不是这个viewmodel.getStore()你需要像viewmodel.getStore('entrystore')一样使用，所以它会返回你的entrystore。

viewModel.getStore(key( 获取通过存储配置配置的存储。

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

你可以在这里检查工作小提琴。

代码片段

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