extjs - 显示要查看的变量

Question

我正在尝试使用 ExtJS 制作一个非常简单的 BMI 计算应用程序。到目前为止，我可以让用户在数字字段中输入他们的身高和体重，计算 BMI 并将其显示到控制台。但是，我无法弄清楚如何将其显示到视图中。

我尝试绑定值，并使用面板但没有运气。显示的只有{bmi}.

理想情况下，我希望在他们单击“计算”按钮功能后显示 bmi 值。

编辑 - 我找到了一种使用 Ext.Template 解决它的方法。这是一个很好的解决方案吗？

代码 -

Ext.define('JamieApp.view.main.Main', {
    extend: 'Ext.Panel',
    xtype: 'mainview',

    requires: [
        'Ext.layout.Fit'
    ],

    controller: 'main',
    viewModel: 'main',

    items: [{
        xtype: 'fieldset',
        title: 'Enter your details',

        items: [{
            xtype: 'numberfield',
            label: 'Enter your height',
            name: 'height',
            minValue: 100,
            maxValue: 210,
            required: true,
            requiredMessage: "Test msg",
            itemId: 'height'
        }, {
            xtype: 'numberfield',
            label: 'Enter your weight',
            required: true,
            minValue: 30,
            maxValue: 150,
            name: 'weight',
            itemId: 'weight',
            reference: 'test',

        }]
    }, {
        xtype: 'button',
    text: 'Calculate',
    listeners: {
        tap: function(){
            var height = this.up('panel').down('#height').getValue();
            var weight = this.up('panel').down('#weight').getValue();

            var heightInMeters = height / 100;
            bmi = weight / (heightInMeters * heightInMeters);

            bmi = bmi.toFixed(2);

            console.log(bmi);

            var t = new Ext.Template("Result: {bmi}")
            t.append(this.up('panel').down('#labelTest').el, {
                bmi: bmi
            })
        }
    }
}, {
    xtype: 'label',
    title: 'test',
    tpl: 'Result: {bmi}',
    itemId: 'labelTest'
}]
});

Answer 1

当您使用viewmodel时，您可以使用bindconfig 在标签上显示结果。

{
    xtype: 'label',
    bind: 'Result <b>{bmi}</b>'
}

为此，您需要将计算设置bmi为viewmodel. 像这样

viewmodel.set('bmi',bmi)

在这个FIDDLE中，我创建了一个使用绑定的演示。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('MainVM', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.main',
            data: {
                bmi: null
            }
        })

        Ext.define('JamieApp.view.main.Main', {
            extend: 'Ext.Panel',
            xtype: 'mainview',

            //controller: 'main',
            viewModel: 'main',

            items: [{
                xtype: 'fieldset',
                title: 'Enter your details',

                items: [{
                    xtype: 'numberfield',
                    label: 'Enter your height',
                    name: 'height',
                    minValue: 100,
                    maxValue: 210,
                    value: 100,
                    required: true,
                    requiredMessage: "Test msg",
                    itemId: 'height'
                }, {
                    xtype: 'numberfield',
                    label: 'Enter your weight',
                    required: true,
                    value: 30,
                    minValue: 30,
                    maxValue: 150,
                    name: 'weight',
                    itemId: 'weight',
                    reference: 'test'
                }]
            }, {
                xtype: 'button',
                text: 'Calculate',
                listeners: {
                    tap: function () {
                        var mainview = this.up('mainview'),
                            height = mainview.down('#height').getValue(),
                            weight = mainview.down('#weight').getValue(),
                            heightInMeters = height / 100,
                            bmi = weight / (heightInMeters * heightInMeters);

                        mainview.getViewModel().set('bmi', bmi.toFixed(2));
                    }
                }
            }, {
                xtype: 'label',
                bind: 'Result <b>{bmi}</b>'
            }]
        });

        Ext.create({
            xtype: 'mainview',
            fullscreen: true
        })
    }
});