javascript - 分机号 : tpl config is ignoring html in Panel

Question

我需要在 panel 类中同时使用 tpl 和 html 配置，但不允许同时呈现这两个配置。

如何才能同时使用两者？

Ext.define('InfoCard.Main', {
    extend: 'Ext.panel.Panel',
    viewModel: {
        type: 'infocardvm'
    },
    layout: {
        type: 'table'
    },

    items: [{
        xtype: 'infocard',
        userCls: 'totalReCls',
        bind: {
            html: '{totalReBar}'
        }, //Can't use 'tpl' here because it doesn't have setTpl()
        glyph: 'xf015@FontAwesome',
        // tpl: 'TotalReBar' //When I'm uncomment the config, then ignores 'bind: html' 
    }]
});

这是完整的样本 FIDDLE .

问题与 this post 有关在软件工程站点。

Answer 1

您可以使用 displayfield panel 的元素内部.在显示字段中有 setValue() 的方法和 setFieldLabel() .因此，您可以根据需要进行更改。

在这个 FIDDLE ，我已经使用您的代码创建了一个演示并进行了修改。希望这会帮助/指导您实现您的要求。

代码片段

Ext.define('InfoCard.Main', {
    extend: 'Ext.panel.Panel',

    tbar: [{
        text: 'Refresh data',
        handler: function () {
            var vm = this.up('panel').getViewModel(),
                store = vm.getStore('firstStore');

            store.getProxy().setUrl('stat1.json');
            store.load();
        }
    }],

    viewModel: {
        type: 'infocardvm'
    },
    layout: {
        type: 'table'
    },

    defaults: {
        xtype: 'infocard',
    },
    items: [{
        items: {
            xtype: 'displayfield',
            fieldLabel: 'Total ReBar',
            bind: '{totalReBar}'
        },
        glyph: 'xf015@FontAwesome'
    }, {
        items: {
            xtype: 'displayfield',
            fieldLabel: 'Total RoBar',
            bind: '{totalRoBar}'
        },
        bodyStyle: {
            "background-color": "#DFE684"
        },
        glyph: 'xf015@FontAwesome'
    }, {
        items: {
            xtype: 'displayfield',
            fieldLabel: 'Total PaBar',
            bind: '{totalPaBar}'
        },
        bodyStyle: {
            "background-color": "#fbe3ab"
        },
        glyph: 'xf015@FontAwesome'
    }]
});