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

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

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

Ext.define（'Admin.view.dashboard.nps'）{
扩展：“Ext.Component”，
xtype:“nps百分比”，
绑定：{
数据：{
nps_百分比：“{nps}”
}
},
tpl:新的Ext.XTemplate（'+{nps_percent.nps}'））
});

---

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

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

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