display a variable to view

Question

I'm trying to make a really simple BMI calculation app using ExtJS. So far I can have the user input their height and weight into number fields, calculate the BMI and display this to the console. However, I can not work out how to display this to the view.

I have tried binding the value, and using a panel but no luck. All that is displayed is {bmi}.

Ideally I would like the bmi value to be displayed once they click the "Calculate" button function.

EDIT - I found a way to resolve it using Ext.Template. Is this a good solution though?

Code -

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

try simplifying the code to get the smallest code that still exhibits the problem — PaulS, Jun 12 '18 at 10:05
Do you mean the code I am displaying here? I thought it would be best to show entire app in case I am going wrong elsewhere. I am new to this and haven't found any good resources to learn what I need. — sunnyj58, Jun 12 '18 at 10:10

score 1 · Answer 1 · edited Jul 31 '18 at 22:01

As you are using viewmodel, so you could use bind config for showing result on label.

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

For this you need to set calculated bmi into viewmodel. like this

viewmodel.set('bmi',bmi)

In this FIDDLE, I have created a demo using binding.

CODE SNIPPET

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

display a variable to view

1 Answers1