javascript - 如何缩短 Ext JS 上模型的数据绑定(bind)？

Question

您会注意到，JSON 在同一字段名称中返回不同的值，因此我使用点符号绑定(bind)到所需的值。但我在不同的类上使用相同的面板，所以我需要找出更好的方法来绑定(bind)指定的值。我尝试在 BookStatModel 上使用 mapping 但未能成功。

如何缩短/增强数据绑定(bind)到 JSON 的使用，这些数据在同一字段名称上具有不同的值。

我无法更改服务器响应；

{
    "success": true,
    "msg": "OK",
    "count": 5,
    "data": [
        {
            "bid": 1000655,
            "code": "TOTALPENDING",
            "totalcount": 1
        },
        {
            "bid": 1000655,
            "code": "TOTALLEFT",
            "totalcount": 2
        },

我通过 VM 存储获取 JSON；

// VM
stores: {
        bookStore: {
            model: 'MyApp.model.base.BookStatModel',
            autoLoad: true,
            session: true,
            proxy: {
                url: MyApp.Globals.getUrl() + '/bonustrans/stat/book',
                type: 'ajax',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            }
        },

// Model itself
Ext.define('MyApp.model.base.BookStatModel', {
    extend: 'MyApp.model.base.StatResultModel',

    requires: [
        'MyApp.Globals',
        'MyApp.FldNames'
    ],

    fields: [
        {name: 'bid', type: MyApp.FldTypes.INT},
        {name: 'code'}
        //{name: 'currentBonus', mapping: 'bookStore.data.items.1.totalcount', type: 'integer'},
        //{name: 'pendingBonus', mapping: 'bookStore.data.items.0.totalcount', type: 'integer'},
        //{name: 'totalBonus', mapping: 'bookStore.data.items.2.totalcount', type: 'integer'}

    ]
});

最后使用bind配置将这些数据绑定(bind)到panel；

{
    xtype: 'infocard',
    flex: 1,
    margin: '0 5 0 0',
    bodyStyle: {
        "background-color": "#DFE684"
    },
    items: [{
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                items: [{
                            xtype: 'container',
                            layout: {
                                type: 'vbox',
                                align: 'middle',
                                pack: 'end'
                            },
                            flex: 2,
                            items: [{
                                xtype: 'container',
                                userCls: 'infocardCount',
                                bind: {
                                    //In another 'infocard' binds to 'items.0.totalcount'
                                    html: '{bookStore.data.items.1.totalcount}' 
                                    //html: '{currentBonus}' //Couldn't render value
                                },
                                flex: 1
                            }, {
                                xtype: 'component',
                                height: 10
                            }, {
                                xtype: 'container',
                                userCls: 'infocardCode',
                                padding: '10',
                                bind: {
                                    //In another 'infocard' binds to 'items.0.code'
                                    html: '{bookStore.data.items.1.code}' 
                                },
                                flex: 1
                            }]
                        },

Answer 1

公式就是答案 对于您的设计来说，这应该有效:

https://fiddle.sencha.com/#view/editor&fiddle/2edq

但我的建议是使用奖金网格，其中奖金类型是一列(currentBonus、pendingBonus、totalBonus)