 |
| https://github.com/ananddayalan/extjs-by-example-calculator |
В файле app.js создается представление Main и отображается в форме плавающего окна внутри браузера.
Ext.application({name: 'Calc', launch: function () { Ext.create('Calc.view.main.Main').show(); } });
Модель представляет собой слой данных. Модель может содержать валидацию данных и логику сохранения данных.
Представление - это пользовательский интерфейс. Кнопки, формы, окна сообщений - всё это представления или по другому виды. В файле main.js содержится представление Main. Представление содержит все кнопки и текстовое поле калькулятора. События связываются с методами контроллера. Контроллер указывается через свойство controller. Представление калькулятора использует лейаут таблицы с 4 столбцами. CSS классы указываются через свойство cls.
Контроллер управляет любой логикой связанной с представлением, обработкой событий в представлении и вообще любой логикой приложения. В Ext JS 5 и 6 есть два вида контроллеров ViewController и Controller. ViewController был веден впервые в Ext JS 5. ViewController это контроллер заточенный под представления в отличие от обычного контроллера который можно использовать в любом месте приложения. Во ViewController есть такие новые штуки как reference и listener для того чтобы упростить связывание представления и контроллера. ViewController уничтожается после уничтожения представления. Вы можете использовать листенеры вместо хендлеров для обработки событий. Контроллер калькулятора содержит методы обработки кликов по кнопкам (цифры, операторы и др.).
View model инкапсулирует локигу представления, связывает данные и представление и управляет обновлениями при изменении данных. В отличии от обычной модели, view model специально создается для представления. Обычная модель это просто класс, который может использоваться в любом месте приложения. А view model специально заточена под использование с представлением. View model используется в качестве data binder-а между моделью и представлением. Пример view model binding. В калькуляторе ViewModel содержит только одно свойство display. Оно связывается с дисплеем калькулятора. В этом примере модель данных не создается отдельно. Также данные для простоты захардкодены.
