extjs 嵌套数据未显示在数据绑定网格中

Question

如何使用我从 webapi ef 创建的以下格式对我的 extjs6 网格进行数据绑定以包含“佣金”？

网格列应如下所示。

title: 'Commissions',
xtype: 'grid',
bind: {
store: '{myAccountDetails.commission}'
},
ui: 'featuredpanel-framed',
cls: 'custom-grid',
margin: '0 0 0 0',
itemId: 'gridCommId',
collapsible: true,
columns: [
{
header: 'USD',
dataIndex: 'usd',
flex: 1
},
{
header: 'AUD',
dataIndex: 'aud',
flex: 1
},
{
header: 'CAD',
dataIndex: 'cad',
flex: 1
}

这是我对网格的看法

我附上的截图是 myAccountDetails

任何帮助将不胜感激！

只是一个旁注...如果我添加一个标签，我可以返回我正在寻找的信息，但我希望它位于网格内。

                    xtype: 'label',
                    cls: 'myLabelCRM2',
                    bind: {
                        text: '{myAccountDetails.commission.aud}'
                    }

Answer 1

最好的方法是在 viewmodel 中定义一个 store，并使用 mustache 语法将其数据字段直接绑定到 details commision 字段。

Ext.define('MyView', {
    viewModel: {
        data: {
            myAccountDetails: {
                accountName: 'foo',
                commision: {
                    aud: 7,
                    cad: 8,
                    usd: 9
                }
            }
        },
        stores: {
            commisionStore: {
                fields: ['aud', 'cad', 'usd'],
                data: '{myAccountDetails.commision}'
            }
        }
    },

    extend: 'Ext.grid.Panel',
    xtype: 'MyView',
    bind: {
        store: '{commisionStore}'
    },
    columns: [{
        header: 'USD',
        dataIndex: 'usd',
        flex: 1
    }, {
        header: 'AUD',
        dataIndex: 'aud',
        flex: 1
    }, {
        header: 'CAD',
        dataIndex: 'cad',
        flex: 1
    }]
});

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create({
            xtype: 'MyView',
            width: 300,
            height: 300,
            renderTo: Ext.getBody()
        });
    }
});