EXTJS 6 MVVM basics confusion - extjs

Question

I'm new to EXTJS 6 and MVVM and I'm not sure if I'm understanding things properly. Please help me with this basic example and whether this is the correct way to do things in the MVVM architecture
I started by creating the sample app via sencha cmd. I see that it created in /view/main/MainModel.js a "variable"? named loremIpsum. I see in the main view there are some bindings to loremIpsum.
I guess my question is, if I wanted to create a 2nd view, like a popup window from the main view, how could I access loremIpsum from Main's viewModel?
I'm getting confused as to whether I should be "sharing" Main's viewModel, or whether I should be moving loremIpsum to model/Base.js which I guess would be a shared model, and then I could have multiple viewModels looking at that view?

Answer 1

What is MVVM?
Model-View-ViewModel (MVVM) is another architectural pattern for writing software that is largely based on the MVC pattern. The key difference between MVC and MVVM is that MVVM features an abstraction of a View (the ViewModel) which manages the changes between a Model’s data and the View‘s representation of that data (i.e. data bindings) — something which typically is cumbersome to manage in traditional MVC applications.
The MVVM pattern attempts to leverage the architectural benefits of MVC (separation of functional responsibilities) yet also provides the additional advantages of data binding. The result is that the Model and framework perform as much work as possible, minimizing (and in some cases eliminating) application logic that directly manipulates the View.
Elements of the MVVM pattern include:
The Model describes a common format for the data being used in the application, just as in the classic MVC pattern.
The View represents the data to the user, just as in the classic MVC pattern.
The ViewModel is an abstraction of the view that mediates changes between the View and an associated Model. In the MVC pattern, this would have been the responsibility of a specialized Controller, but in MVVM, the ViewModel directly manages the data bindings and formulas used by the View in question.
MVVM: An Example
In this FIDDLE, I have created a demo usng grid and window. I hope this will help you to understand concept of MVVM.
CODE SNIPPET
//Define model
Ext.define('NJDHV10.model.UserModel', {
extend: 'Ext.data.Model',
//Define fields in store
fields: ['fullname', 'email', 'phone'],
});
//Define Store
Ext.define('NJDHV10.store.UserStore', {
extend: 'Ext.data.Store',
model: 'NJDHV10.model.UserModel',
alias: 'store.userstore',
data: [{
fullname: 'Chunk P',
email: 'alias#njdhv10.com',
phone: [phone]
}, {
fullname: 'Champ M',
email: 'super#njdhv10.com',
phone: [phone]
}, {
fullname: 'David W',
email: 'david#njdhv10.com',
phone: [phone]
}, {
fullname: 'Marin d',
email: 'marin#njdhv10.com',
phone: [phone]
}]
});
//Define ViewModel for user list
Ext.define('NJDHV10.view.UserListModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.userlistvm',
stores: {
userstore: {
type: 'userstore'
}
}
});
//Define Controller
Ext.define('NJDHV10.view.UserController', {
extend: 'Ext.app.ViewController',
alias: 'controller.user',
/**
* This function will fire on grid item click
* #param { Ext.selection.RowModel} selModel
* #param {Ext.data.Model} rec
*/
onGridItemClick: function (selModel, rec) {
var form = Ext.ComponentQuery.query('userform')[0];
if (!form) {
form = Ext.create('NJDHV10.view.UserForm');
}
if (form.isHidden()) {
form.show();
}
form.getViewModel().set('userData', rec)
}
});
//Define ViewModel for user form data
Ext.define('NJDHV10.view.UserFormModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.userformvm',
data: {
userData: null
}
});
//User form for entry
Ext.define('NJDHV10.view.UserForm', {
extend: 'Ext.window.Window',
closable: true,
width: 320,
//Define xtype
// xtype: 'userform',
alias: 'widget.userform',
model: true,
autoDestroy: true,
floating: true, // make this panel an absolutely-positioned floating component
//provide viewmodel to form
viewModel: {
type: 'userformvm'
},
title: 'User Form',
layout: {
align: 'stretch',
type: 'vbox'
},
defaults: {
xtype: 'textfield',
margin: 10,
labelAlign: 'top'
},
items: [{
fieldLabel: 'Full Name',
bind: {
value: '{userData.fullname}' //bind data using viewmodel in form
},
name: 'fullname'
}, {
fieldLabel: 'Email',
bind: {
value: '{userData.email}' //bind data using viewmodel in form
},
name: 'email',
vType: 'email'
}, {
fieldLabel: 'Phone Number',
bind: {
value: '{userData.phone}' //bind data using viewmodel in form
},
name: 'phone'
}]
});
//Define user grid
Ext.define('NJDHV10.view.UserGrid', {
extend: 'Ext.grid.Panel',
xtype: 'usergrid',
title: 'User List (Click to any row and see details in window)',
controller: 'user',
//provide view model to gridQA8sjZHC
viewModel: {
type: 'userlistvm'
},
//Bind store to grid
bind: {
store: '{userstore}'
},
//Add listeners into item click
listeners: {
itemclick: 'onGridItemClick'
},
columns: [{
xtype: 'rownumberer'
}, {
text: 'Name',
flex: 1,
dataIndex: 'fullname'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}]
});
Ext.application({
name: 'NJDHV10',
launch: function () {
//Create grid to view
Ext.create('NJDHV10.view.UserGrid', {
layout: 'fit',
renderTo: Ext.getBody()
});
}
});