Правило создание своих компонентов c использованием MVVM

   Для добавление своих компонентов в проект требется создать зайти в папку app.

В ней создать папку cmp (component), если она не создана. Далее заводим папку с именем компонента который будет создан и уже в ней создаем view, controller, viewmodel.

Именование файлов производить следующим образом:

  • view - [Имя папки][Cmp]
  • controller - [Имя папки][Controller]
  • ViewModel - [Имя папки][ViewModel]

Пример:

Требование: Требуется создать компонент для вывода данных о лицевом счете потребителя.

1. Создаем представление для компонента

Ext.define('AppGpl1.cmp.subscrHeader.SubscrHeaderCmp', {
extend: 'Ext.Container',
xtype: 'ctrl-subscrHeader',
requires: [
'AppGpl1.cmp.subscrHeader.SubscrHeaderController',
'AppGpl1.cmp.subscrHeader.SubscrHeaderViewModel'
],
example: { //(1)
inputData: {
fio: 'Иванов Иван Иванович',
area: 102,
typeOwn: 'Частная',
subscrNumber: '777',
orgName: 'ООО "Заря"',
address: 'Какой-то дом 7',
amount: 520
}
},
constructor: function (config) {
if (!config.inputData) { //(2)
Ext.raise('Требуется передать входной параметр inputData, как объект. Например ' + JSON.stringify(config.example.inputData));
}
this.callParent(arguments);
},
controller: 'subscrHeader',
viewModel:{
type: 'subscrHeader'
},
items: [
{
bind: {//(3)
html: 'Л/С № {subscrNumber} | {fio} | {orgName}{address}Площадь: {formatArea} кв. м | Тип: {typeOwn} | {debt}'
}
}
],
listeners: {
initialize: 'onLoad'
}
});

(1) - пример объекта который может принять компонент для правильного вывода информации

(2) - проверка на пустое значение данного объекта, вслучаи если объект равен null или undefined выводиться сообвествующее сообщение

(3) - привязка данных

2.  Создаем контроллер 

Ext.define('AppGpl1.cmp.subscrHeader.SubscrHeaderController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.subscrHeader',

    onLoad: function (sender, eOpts) {       // (1) 
        this.getViewModel().setData(sender.inputData);
    }
});

(1) - передаем данные viewmodel

3. Создаем ViewModel


Ext.define('AppGpl1.cmp.subscrHeader.SubscrHeaderViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.subscrHeader',
formulas: {
debt: function (get) {
var amount = get('amount');
return this.amountLabel(amount) + ': ' + this.numberFormat(amount, true);
},
formatArea: function (get) {
return this.numberFormat(get('area'), false);
}
},

isDebt: function (amount) {
return amount === 0.0 || amount > 0;
},
amountLabel: function (amount) {
if (this.isDebt(amount)) {
return 'Долг';
} else {
return 'Переплата';
}
},
numberFormat: function (amount, useColor) {
var result = Ext.util.Format.number(amount, '0,000.##');
if (this.isDebt(amount) && useColor)
return '<span style="color: red;">' + result + '</span>';
else
return result;
}
});

!!! Внимание. По соглащению всю логику требуется хранить во viewmodel

Про data binding в extjs можно прочитать тут: https://docs.sencha.com/extjs/6.0/application_architecture/view_models_data_binding.html

Нет комментариев

Добавить комментарий