Question

正如您将注意到 JSON在同一字段名称中返回不同的值，因此我已使用dot notation绑定到所需的值。但是我在不同的类上使用相同的面板，所以我需要找出一种更好的方法来绑定指定的值。我试图在mapping上使用BookStatModel，但无法成功。

如何缩短/抢夺使用对同一字段名称具有不同值的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'}

    ]
});

最后使用panel config;

将这些数据绑定到bind

{
    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

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

如何缩短Ext JS上模型的数据绑定？

1 个答案: