Ext JS: tpl config 忽略了面板中的 html

Question

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

如何能够同时使用两者？

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' 
    }]
});

这是完整的样本小提琴。

问题与软件工程网站上的这篇文章有关。

Answer 1

您可以在panel项中使用displayfield。在显示字段中具有用于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'
    }]
});

Answer 2

当我正确理解您时，您希望使用变量值呈现静态字符串。

{
    xtype: 'infocard',
    bind: { data: '{totalReBar}' },  // bind the data for the tpl
    tpl: 'TotalReBar {totalCount}'   // use the data provided via binding in the tpl
}

公式现在必须返回 tpl 数据绑定的对象。您可以通过键访问 tpl 中的值。

formulas: {
    totalReBar: {
        bind: {bindTo: '{firstStore}', deep: true},
        get: function (store) {
            var record = store.findRecord("code", "TOTALRE");
            return {
                totalCount: record ? record.get("totalcount") : "-1"  // totalCount is now available in the tpl as a variable
            };
        }
    },

请参阅修改后的小提琴。

Answer 3

我相信你想要的是这样的：

    {
        xtype: 'infocard',
        userCls: 'totalReCls',
        bind: {data: {'myVal': '{totalReBar}'}},
        glyph: 'xf015@FontAwesome',
        tpl: '{myVal}'
    }

希望有帮助