Extjs 显示要查看的变量

我正在尝试使用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'
}]
});

---

由于您使用的是

viewmodel

，所以可以使用config在标签上显示结果

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

在这篇文章中，我使用绑定创建了一个演示

代码片段

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

Ext.application({
名字：“小提琴”，
启动：函数（）{
Ext.define（'MainVM'{
扩展：“Ext.app.ViewModel”，
别名：“viewmodel.main”，
数据：{
bmi:null
}
})
Ext.define（'JamieApp.view.main.main'{
扩展：“Ext.Panel”，
xtype:'mainview'，
//控制器：'主'，
viewModel:'主'，
项目：[{
xtype:“字段集”，
标题：“输入您的详细信息”，
项目：[{
xtype:'numberfield'，
标签：“输入您的身高”，
名称：'高度'，
最小值：100，
最大值：210，
数值：100，
要求：正确，
requiredMessage:“测试消息”，
itemId:'高度'
}, {
xtype:'numberfield'，
标签：“输入您的体重”，
要求：正确，
数值：30，
最小值：30，
最大值：150，
名称：'重量'，
itemId:'重量'，
参考：“测试”
}]
}, {
xtype:'按钮'，
文本：“计算”，
听众：{
点击：功能（）{
var mainview=this.up（'mainview'），
height=mainview.down（“#height”）.getValue（），
weight=mainview.down（“#weight”）.getValue（），
高度米=高度/100，
体重指数=体重/（身高米*身高米）；
mainview.getViewModel（）.set（'bmi'，bmi.toFixed（2））；
}
}
}, {
xtype:'标签'，
bind:'结果{bmi}'
}]
});
外部创建({
xtype:'mainview'，
全屏：正确
})
}
});

尝试简化代码，以获得仍然存在问题的最小代码您是指我在这里显示的代码吗？我想最好是显示整个应用程序，以防我在其他地方出错。我是新手，还没有找到任何好的资源来学习我需要的东西。

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