отобразить переменную для просмотра - PullRequest
Новая
       30

отобразить переменную для просмотра

0 голосов
/ 12 июня 2018

Я пытаюсь создать действительно простое приложение для расчета ИМТ с использованием ExtJS.До сих пор пользователь мог вводить свой рост и вес в числовые поля, рассчитывать ИМТ и отображать это на консоли.Тем не менее, я не могу решить, как отобразить это для представления.

Я попытался связать значение и использовать панель, но не повезло.Все, что отображается, это {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'
}]
});

1 Ответ

0 голосов
/ 12 июня 2018

Поскольку вы используете viewmodel, вы можете использовать конфигурацию bind для отображения результата на этикетке. 

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

Для этого вам нужно установить рассчитанное значение bmiв viewmodel.вот так 

viewmodel.set('bmi',bmi)

В этом FIDDLE я создал демонстрационную версию с использованием привязки.

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