Ext JS：tpl 配置忽略面板中的 html

Question

我需要在 panel class 中使用 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

如果我理解正确的话，你想呈现一个带有变量值的静态字符串。

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

公式现在必须 return 一个用于 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
            };
        }
    },

参见modified fiddle。

Answer 2

我相信你想要的是这个：

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

希望对您有所帮助

Answer 3

您可以使用 displayfield inside of items of panel. In display field have methods for setValue() and setFieldLabel()。所以你可以根据需求改变。

在此FIDDLE中，我使用您的代码创建了一个演示并进行了修改。希望这会 help/guide 你达到你的要求。

代码片段

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

Ext JS：tpl 配置忽略面板中的 html

Ext JS: tpl config is ignoring html in Panel

javascript

bind

extjs

mvvm