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

以下是完整示例FIDDLE。

问题与软件工程网站的this post有关。

Answer 1

您可以在displayfield的项目中使用panel。在显示字段中有setValue()和setFieldLabel()的方法。所以你可以根据要求进行改变。

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

CODE SNIPPET

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

请参阅modified fiddle。

Answer 3

我相信你想要的是这个：

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

希望有所帮助

Ext JS：tpl config忽略了Panel中的html

3 个答案: