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

下面是JSON，需要将

code

field'字符串值格式化为其他文本。例如，“TOTALPENDING”将呈现为“待定奖金”，而“TotalEFT”将呈现为“当前奖金”。我怎样才能做到这一点

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

通过

ViewModel

stores获取数据

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

为此，您需要在中使用config

在这个中，我使用

网格

、

存储

和

模型

创建了一个演示。我希望这将有助于/指导您实现您的要求

代码片段

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上的一个项将

totalcount

字段返回为0<代码>{“代码”：“TOTALI”，“totalcount”：0}，。虽然totalcount为零，但它不绑定到屏幕。请查看此屏幕截图@。如何配置模型或视图以保持绑定任何值，即使该值为0？不，不是。它是整数。这才是最重要的。我以这种方式绑定到视图上的JSON<代码>{xtype:'container'，userCls:'infocardCount'，bind:{html:{reserStore.data.items.9.totalcount}}，flex:1}，@NuriEngin请看我的小提琴我已经更新了

{xtype:'container'，margin:10，viewModel:{type:'test'，userCls:'infocardCount'，bind:{html:'如果值为0，那么我们可以使用管道，在这种情况下，您需要在字符串内部传递0，如books.data.items.0.totalcount | | | |“0”

{books.data.items.0.totalcount | |“0”}，flex:1}

{
    "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
    }]
}