Ext.js - Arquitetura
Ext JS segue a arquitetura MVC / MVVM.
MVC - Arquitetura Model View Controller (versão 4)
MVVM - Model View Viewmodel (versão 5)
Essa arquitetura não é obrigatória para o programa, no entanto, é uma prática recomendada seguir essa estrutura para tornar seu código altamente sustentável e organizado.
Estrutura do projeto com Ext JS App
----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML filesA pasta Ext JS app residirá na pasta JavaScript do seu projeto.
O aplicativo conterá arquivos de controlador, visualização, modelo, armazenamento e utilitário com app.js.
app.js- O arquivo principal de onde o fluxo do programa começará, que deve ser incluído no arquivo HTML principal usando a tag <script>. O aplicativo chama o controlador do aplicativo para o resto da funcionalidade.
Controller.js- É o arquivo controlador da arquitetura Ext JS MVC. Ele contém todo o controle do aplicativo, os ouvintes de eventos e a maior parte da funcionalidade do código. Ele tem o caminho definido para todos os outros arquivos usados naquele aplicativo, como store, view, model, require, mixins.
View.js- Contém a parte da interface do aplicativo, que aparece para o usuário. Ext JS usa várias visualizações ricas de IU, que podem ser estendidas e personalizadas aqui de acordo com o requisito.
Store.js- Contém os dados armazenados localmente em cache que devem ser renderizados na visualização com a ajuda de objetos de modelo. O armazenamento busca os dados usando proxies que possuem o caminho definido para os serviços buscarem os dados de back-end.
Model.js- Contém os objetos que vinculam os dados da loja à visualização. Ele possui o mapeamento de objetos de dados de back-end para o view dataIndex. Os dados são obtidos com a ajuda de store.
Utils.js- Não está incluído na arquitetura MVC, mas é uma prática recomendada para tornar o código mais limpo, menos complexo e mais legível. Podemos escrever métodos neste arquivo e chamá-los no controlador ou no renderizador de visualização sempre que necessário. É útil também para fins de reutilização de código.
Na arquitetura MVVM, o controlador é substituído por ViewModel.
ViewModel- Basicamente, medeia as mudanças entre vista e modelo. Ele vincula os dados do modelo à visualização. Ao mesmo tempo, não tem nenhuma interação direta com a visualização. Tem apenas conhecimento do modelo.
Como funciona
Por exemplo, se estivermos usando um objeto de modelo em dois ou três locais na IU. Se alterarmos o valor em um local da IU, podemos ver sem nem mesmo salvar essa alteração. O valor do modelo muda e, portanto, é refletido em todos os lugares da IU, onde quer que o modelo seja usado.
Isso torna o esforço do desenvolvedor muito menor e mais fácil, pois nenhuma codificação extra é necessária para vincular os dados.