javascript - 如何用 Ext JS 格式化返回的 JSON 字符串值？

Question

我在下面得到这个 JSON，需要将 code 字段的字符串值格式化为其他一些文本。例如，“TOTALPENDING”将呈现为“Pending Bonus”，“TOTALLEFT”将呈现为“Current Bonus”。我怎样才能做到这一点？

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

通过 ViewModel 存储获取数据；

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

Answer 1

为此你需要使用 convert在 model 中配置.

在这个 FIDDLE ，我已经使用 grid、store 和 model 创建了一个演示。我希望这会帮助/指导您实现您的要求。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('Book', {
            extend: 'Ext.data.Model',
            fields: ['bookerid', {
                name: 'code',
                convert: function (v, rec) {
                    switch (v) {
                    case 'TOTALPENDING':
                        v = 'Pending Bonus';
                        break;
                    case 'TOTALLEFT':
                        v = 'Current Bonus';
                        break;
                    default:
                        v = '';
                        break;
                    }
                    return v;
                }
            }, 'totalcount'],
        });

        Ext.define('TestViewModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.test',
            stores: {
                books: {
                    model: 'Book',
                    proxy: {
                        type: 'ajax',
                        url: 'book.json',
                        reader: {
                            type: 'json',
                            rootProperty: 'data',
                            keepRawData: true
                        }
                    },
                    autoLoad: true
                }
            }
        });

        Ext.create({
            xtype: 'container',
            layout: 'vbox',
            fullscreen: true,
            renderTo: Ext.getBody(),

            viewModel: {
                type: 'test'
            },

            items: [{
                xtype: 'container',
                userCls: 'infocardCount',
                margin: 10,
                bind: {
                    html: '<small>If value is 0 then we can use pipes and in that case you need to pass 0 inside of string like this <b> books.data.items.0.totalcount || "0"</b> </small><br><br> <b style="color: #3c3c3c;background: #ccc;padding: 10px;margin: 10px;">{books.data.items.0.totalcount || "0"}</b>'
                }
            }, {
                xtype: 'grid',
                flex: 1,
                width: '100%',
                title: 'Book Data',
                bind: {
                    store: '{books}'
                },
                columns: [{
                    text: 'BOOK ID',
                    flex: 1,
                    dataIndex: 'bookerid'
                }, {
                    text: 'CODE',
                    dataIndex: 'code',
                    flex: 1
                }, {
                    text: 'TOTAL',
                    flex: 1,
                    dataIndex: 'totalcount'
                }]
            }]
        });

    }
});

JSON 文件

{
    "success": true,
    "msg": "OK",
    "count": 5,
    "data": [{
        "bookerid": 103083420,
        "code": "TOTALPENDING",
        "totalcount": 0
    }, {
        "bookerid": 103083421,
        "code": "TOTALLEFT",
        "totalcount": 15
    }, {
        "bookerid": 103083422,
        "code": "TOTALPENDING",
        "totalcount": 12
    }, {
        "bookerid": 103083423,
        "code": "TOTALLEFT",
        "totalcount": 10
    }, {
        "bookerid": 103083424,
        "code": "TOTALLEFT",
        "totalcount": 16
    }]
}