extjs6mvvm基础知识混乱

我是ExtJS6和MVVM的新手，我不确定自己是否正确理解了这些东西。请帮助我了解这个基本示例，以及这是否是MVVM体系结构中的正确方法

我首先通过senchacmd创建示例应用程序。我看到它在/view/main/MainModel.js中创建了一个“变量”？名为洛雷米普苏姆。我在主视图中看到了一些到loremIpsum的绑定

我想我的问题是，如果我想创建第二个视图，比如主视图中的弹出窗口，如何从主视图的viewModel访问loremIpsum

---

我很困惑是否应该“共享”Main的viewModel，或者是否应该将loremIpsum移动到model/Base.js，我猜这将是一个共享模型，然后我可以让多个viewModels查看该视图

什么是MVVM？

Model-View-ViewModel（MVVM）是另一种主要基于MVC模式编写软件的体系结构模式。MVC和MVVM之间的关键区别在于，MVVM具有一个视图（ViewModel）的抽象，它管理模型数据和该数据的视图表示（即数据绑定）之间的更改—这在传统MVC应用程序中通常很难管理。 MVVM模式试图利用MVC（功能职责分离）的体系结构优势，但也提供了数据绑定的其他优势。结果是模型和框架执行尽可能多的工作，最小化（在某些情况下消除）直接操纵视图的应用程序逻辑

MVVM模式的元素包括：

• 描述了应用程序中使用的数据的通用格式，就像在经典的MVC模式中一样
• 向用户表示数据，就像在经典的MVC模式中一样
• 视图是视图的抽象，它在视图和关联模型之间调解更改。在MVC模式中，这将由专门的控制器负责，但在MVVM中，ViewModel直接管理相关视图使用的数据绑定和公式

MVVM：一个例子

在此中，我创建了一个演示usng和。我希望这将帮助您理解MVVM的概念

代码片段

//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: 9827623311
    }, {
        fullname: 'Champ M',
        email: 'super@njdhv10.com',
        phone: 9827623312
    }, {
        fullname: 'David W',
        email: 'david@njdhv10.com',
        phone: 9827623313
    }, {
        fullname: 'Marin d',
        email: 'marin@njdhv10.com',
        phone: 9827623314
    }]

});
//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()
        });
    }
});

---

另外，如果有人有一个很好的基本示例，其中包含两个视图和一个共享的modelView/模型，我会非常感激，感谢您的反馈。我想我现在更清楚视图和视图模型是如何工作的，但我现在有一个更具体的问题，我将在一篇新的帖子中提出，我将在这里链接这是我用一个更具体的问题示例创建的新帖子