如何在 Ext.Component ExtJS 中显示存储中的数据答案

【问题标题】：How to display data from store in Ext.Component ExtJS如何在 Ext.Component ExtJS 中显示存储中的数据
【发布时间】：2019-01-29 23:58:45
【问题描述】：

我有存储从服务器返回的数据：

Ext.define('Admin.store.dashboard.NPS', {
extend: 'Ext.data.Store',
alias: 'store.nps',

autoLoad : false,
proxy    : {
    type: 'api',
    url : SITE_URL + '/api/surveys/nps'
},
fields   : [
    {
        type: 'float',
        name: 'nps'
    }
]    
});

我想在 Ext.Component 的 tpl 中显示该数据：

Ext.define('Admin.view.dashboard.NPSPercent', {
extend: 'Ext.Component',
xtype: 'nps-percent',
bind: {
    data: {
        nps_percent: '{nps}'
    }
},

tpl: new Ext.XTemplate('<div class="percent">+{nps_percent.nps}</div>')
});

我尝试将数据绑定到加载的商店，但它不起作用。

【问题讨论】：

标签： extjs extjs6-classic extjs6-modern

【解决方案1】：

组件中的模板需要常规的东西，比如数组，而不是存储。要使用商店作为数据源来呈现模板，请使用 Ext.view.View 类而不是仅使用组件。

【讨论】：

我的父视图中有 viewModel，其中包含我的组件。所以这意味着所有子元素都可以访问 viewModel 父视图。
我不建议这样做（至少在规模相当大的项目中）。如果您需要来自父组件的 vm 的数据，通常最好在子组件中定义一个配置，并将该配置绑定到父组件中的 vm。