ExtJS等待数据加载完成后渲染图标避免初始显示错误的实现方案

页面需要根据布尔类型的card.recurrentSupported值渲染两个图标之一，初始渲染时传入的value == null，数据加载完成后value的值为true、false或null。现有实现中页面会先渲染close图标，0.5秒数据加载完成后若value == true才会重绘为check图标，期望实现等待数据加载完成后再渲染图标，避免初始显示错误。
renderer: function还支持额外参数metadata, record, RowIndex, colIndex, store, view，是否可以通过这些参数获取数据加载的状态标记？

原有实现代码如下：

items: [                
            {
                ...
            },
            {
                fieldLabel: 'Support for recurrences',
                bind: '{card.recurrentSupported}',
                renderer: function (value) {
                    return value != null && value ? '<i class="fa fa-check text-green"></i>' : '<i class="fa fa-close text-red"></i>';
                }
            },
        ]

关联Card.js代码：

Ext.define('App.view.card.Card', {
extend: 'Ext.form.Panel',
alias: 'widget.card',
requires: [
    'App.view.card.CardController'
],
controller: 'app.card',

viewModel: {
    security: {
        allowManageCard: 'card-update'
    },
    formulas: {
        merchantId: function (get) {
            var card = get('card');
            return card != null ? card.get('merchant') : null
        }
    }
},
modelValidation: true,

bind: {
    title: '{card.maskedPan}'
},

menuToken: 'cards',
tools: [
    {
        xtype: 'container',
        html: [
            '<ul class="breadcrumbs">',
            '<li><a href="#home"><i class="fa fa-home"></i></a></li>',
            '<li><a href="#cards">Cards</a></li>',
            '</ul>'
        ]
    }
],

defaults: {
    xtype: 'container',
    layout: 'form',
    defaultType: 'displayfield'
},

cls: 'adminkit-panel',

items: [
    {
        bind: {
            data: {
                blocked: '{card.blocked}',
                status: '{card.status}'
            }
        },
        data: {empty: true},
        tpl: [
            ...
        ],
        width: 70
    },
    {
        columnWidth: 0.5,
        items: [
            ...                
        ]
    },
    {
        columnWidth: 0.5,
        items: [
            ...
            {
                fieldLabel: 'Support for recurrences',
                bind: '{card.recurrentSupported}',
                renderer: function (value) {
                    return value != null && value ? '<i class="fa fa-check text-green"></i>' : '<i class="fa fa-close text-red"></i>';
                }
            },
        ]
    }
]
});

关联CardController.js代码：

Ext.define('App.view.card.CardController', {
alias: 'controller.app.card',
extend: 'AdminKit.EntityViewController',

entityType: 'Card',

initViewModel: function() {
    var vm = this.getViewModel();
    vm.bind('{merchantId}', function (merchantId) {
        if (vm.get('merchantId') != null){
            Rpc.MerchantManager.resolve({id: merchantId}, function (err, res){
                vm.set('merchantName', res != null ? res.name : null)
            })
        }
    })
},

...
});

方案1：绑定对象判断加载状态 #

将bind: '{card.recurrentSupported}'替换为bind: {value: {isrecurrent: '{card.recurrentsupported}'}}，以此追踪数据加载状态。初始渲染时value为空字符串，数据加载完成后value为{isRecurrent: true, false或undefined}，如果对象已创建但数据未加载完成则value.isRecurrent == null，实现代码如下：

{
                fieldLabel: 'Support for recurrences',
                bind: {value: {isRecurrent: '{card.recurrentSupported}'}},
                renderer: function (value) {
                    if (!Ext.isEmpty(value) && value.isRecurrent != null) {
                        return value.isRecurrent ? '<i class="fa fa-check text-green"></i>'
                            : '<i class="fa fa-close text-red"></i>';
                    } else if (!Ext.isEmpty(value) && value.isRecurrent === undefined) {
                        return '<i class="fa fa-close text-red"></i>';
                    } else {
                        return ''
                    }
                }
            }

方案2：绑定确认填充的关联字段 #

额外绑定一个确认会被填充的字段（如card.maskedPan），通过该字段的加载状态判断数据是否加载完成，实现代码如下：

{
                fieldLabel: 'Support for recurrences',
                bind: {value:  {pan: '{card.maskedPan}', recurrentSupported: '{card.recurrentSupported}'}},
                renderer: function (value) {
                    if (value.pan == null) {
                        return '';
                    }
                    return value.recurrentSupported ? '<i class="fa fa-check text-green"></i>'
                        : '<i class="fa fa-close text-red"></i>';
                }
            },

内容的提问来源于stack exchange，提问作者Alexander