Javascript 如何缩短ExtJS上模型的数据绑定？

正如您所注意到的，JSON在同一字段名中返回不同的值，因此我用

点符号

绑定到所需的值。但我在不同的类上使用相同的面板，所以我需要找出更好的方法来绑定指定的值。我曾尝试在

BookStatModel

上使用

mapping

，但没有成功

我如何实现对JSON的数据绑定的shorten/roboust使用，这些JSON在同一字段名上具有不同的值

我不能改变服务器响应

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

我通过虚拟机商店获取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

config将这些数据绑定到

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
                            }]
                        },

---

公式是设计的答案。这应该是可行的：

---

但我的建议是使用奖金网格，其中BonuType是一列（currentBonus、pendingBonus、totalBonus）

公式是您设计的答案，应该可以：

---

但我的建议是使用奖金网格，其中BonuType是一列（currentBonus、pendingBonus、totalBonus）

它工作得非常好。非常感谢您的样品和您的想法。它工作得非常好。非常感谢您的样品和您的想法。