Структура MVC и MVVM

[potkin]

До этого юзал сугубо MVC. Там всё просто и примеров навалом и все в таком виде:
1) Создаются 4 директории: view, model, store и controller
2) Структура файла app.js:

Ext.application({
    name: "XXX",
    appFolder: 'Content/app',

    views: [ ... ],
    models: [ ... ],
    stores: [ ... ],
    controllers: [ ... ],

    viewport: {
        ...
    },

    launch: function () {
        ...
    }
});

А вот с паттерном MVVM ничего понять не могу.
Где хранить: View, ViewController и ViewModel? А то в примерах всё накидано в одну кучу (одну директорию)
Есть ли вообще файл app.js? Если есть, то какова его структура?

Может кто-то подсказать как MVVM реализовано в ExtJS?

[potkin]

Сижу разбираюсь в примерах с англо-язычных сайтов ...
В app.js (MVVM) для ViewModel и ViewController надо объявлять так:

requires: ['ViewModel', 'ViewController']

При том во всех примерах структура директорий и app.js файла разная, нет общепринятой типизации, как в MVC.
Например предлагают все типы оформлять в одной директории (Вьюху, ВьюМодель и ВьюКонтролер).
И т.д.

[nohuhu]

Для MVC была техническая причина рекомендовать определённую структуру директорий в проекте: разрешение имён файлов по классам. Точнее, это было сделано не только и не столько даже для MVC, сколько для динамического загрузчика Ext.Loader. Cmd в те времена не было, и для того, чтобы иметь возможность задавать классы моделей и контроллеров по короткому имени, нужно было, чтобы файлы с этими классами легко было найти. Отсюда app/model/*, app/controller/*, etc.

ViewController и ViewModel добавляли уже сильно позже, когда появилась Cmd и организация структуры директорий в проекте стала, в сущности, вопросом организационным. Техническая надобность отпала, т.к. Cmd всё равно найдёт все файлы и составит дерево зависимостей.

TL;DR Придумайте себе структуру, которая вам по душе, и придерживайтесь её. Примеры есть в KitchenSink, но это просто примеры и придерживаться их не обязательно.

[potkin]

nohuhu,
ЦМД не пользуюсь, но в принципе ясно ...

В MVC у View был itemId, по которому в Контроллере задействовались методы. А в MVVM так:
1) Для кнопок нужно объявить toggleHandler: 'onBtnNameClick'
2) Для, например treelist нужен "слушатель" listeners: { itemclick: 'onTreelisttemClick' }
3) И т.д.

Зоопарк одним словом или я что-то не понимаю?

[nohuhu]

nohuhu,
ЦМД не пользуюсь, но в принципе ясно ...

Зря.

В MVC у View был itemId, по которому в Контроллере задействовались методы. А в MVVM так:
1) Для кнопок нужно объявить toggleHandler: 'onBtnNameClick'
2) Для, например treelist нужен "слушатель" listeners: { itemclick: 'onTreelisttemClick' }
3) И т.д.

Зоопарк одним словом или я что-то не понимаю?

И то, и другое. В старом MVC были только глобальные контроллеры, которые слушали события от *всех* компонентов, и выбирали "свои" события по глобальному селектору. Для того, чтобы не ловить лишние события, селектор нужно было делать максимально избирательным; отсюда рекомендация использовать itemId для идентификации нужных компонентов.

В "новом" MVC есть ViewController, который привязывается к своему view и ловит события только внутри иерархии своего view. Для реакции на события используются методы ViewController, и в конфигурации view вы задаёте названия этих методов.

Что касается toggleHandler и itemclick, то это очень разные вещи. Во-первых, toggleHandler применим только к кнопкам-переключателям; во-вторых, он срабатывает при смене состояния, а не при клике. Вам никто не мешает слушать событие click на кнопках, но обычно для переключателей интересен именно момент смены состояния.

Исторически в Ext для активных компонентов предлагалось два варианта информирования о событиях: собственно событие, на которое можно подписаться (в данном случае toggle), или функция callback, которую можно было указать в конфигурации компонента (toggleHandler). В современном Ext для callback вместо функции можно указать имя метода в ViewController.

Оба варианта функционально идентичны:

{
    xtype: 'button',
    text: 'foo',
    enableToggle: true,
    toggleHandler: 'onFooToggle'
}, {
    xtype: 'button',
    text: 'bar',
    enableToggle: true,
    listeners: {
        toggle: 'onBarToggle'
    }
}

В TreeList смены состояния нет, поэтому слушайте событие itemclick.