java - 数据加载后的 ExtJS 渲染

Question

在页面上，您需要绘制两个图标之一。“card.recurrentsupported”是“布尔”类型。在输入value == null。加载数据后，value == true, false or 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)
            })
        }
    })
},

...
});

我通过替换解决了这个bind: '{card.recurrentSupported}' 问题bind: {value: {isrecurrent: '{card.recurrentsupported}'}}。这样我们就可以跟踪数据的加载时间。开始渲染时，value = ""，加载数据后，value = {isRecurrent: true, false or unndefined}。有时候，创建了一个对象，但是数据来不及加载，那么 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 ''
                    }
                }
            }

选项，添加一个完全填写的字段

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

标签： javaextjs

Answer 1

有不同的方法可能。

事件监听器

stores: {
    myStore: {
        url: 'getDataUrl',
        listeners: {
            load: function() {
                const view = Ext.create('newView')
            }
        }
    }
}

数据绑定

xtype: 'myView' 绑定: {hidden: '{myStore.loading}'}