Extjs 7，如何使用视图模型将动态数据从一个控制器传递到另一个控制器

Posted 2023-02-26

【中文标题】Extjs 7，如何使用视图模型将动态数据从一个控制器传递到另一个控制器

【英文标题】：Extjs 7, How to pass dynamic data from one controller to another controller using view Model

【发布时间】：2020-06-29 06:28:23

【问题描述】：

我是 sencha 的新手，我正在尝试使用 ctrl 将数据从一个页面传递到另一个页面到 ctrl，onclick 提交按钮的值应该携带到另一个页面视图

注册页面查看

Ext.define('sample.view.register.Registration', 
extend: 'Ext.container.Container',
xtype: 'register',
itemId: 'registers',
layout: 'vbox',
requires: [
    'sample.view.register.RegistrationModel',
    'sample.view.register.RegistrationController',
    'sample.view.user.User',
    'sample.view.user.UserController',
    'sample.store.Personnel'
],
controller: 'register',
viewModel: 'register',
items: [
    
        xtype: 'container',
        padding: 10,
        items: [
            xtype: 'textfield',
            fieldLabel: 'User Name',
            name: 'nameReg',
            bind: 
                value: 'formData.nameReg'
            
        , 
            xtype: 'textfield',
            name: 'password1',
            inputType: 'password',
            itemId: 'password1',
            fieldLabel: 'Password',
        ,

        
            xtype: 'button',
            text: 'Submit',
            handler: 'onSubmit'
        ],

    ],

**注册控制器**

Ext.define('sample.view.register.RegistrationController', 
extend: 'Ext.app.ViewController',
alias: 'controller.register',
onSubmit: function () 
    var name = Ext.ComponentQuery.query('#nameReg')[0].lastValue;
    var pass = Ext.ComponentQuery.query('#password1')[0].lastValue;
    var age = Ext.ComponentQuery.query('#age')[0].lastValue;

    const da = this.getViewModel().get('formData');
     console.log(da) // im getting data here user, this data I want to carry to another page( User page )
 // Ext.create('sample.view.user.User', 
    //     id: Ext.id(),
    //     myVariable: store,
    // );

注册模型页面

Ext.define('sample.view.register.RegistrationModel', 
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.register',
data: 
    formData: 
        nameReg: '',
        pass: null,
    ,
    afterSubmit: true,
    //     names: 'sample',
    //     loremIpsum: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
,

); 用户页面视图 这里我要显示数据，它是从reg页面携带的并将值绑定到输入

Ext.define('sample.view.user.User', 
xtype: 'user',
extend: 'Ext.form.Panel',
// extend: 'Ext.Container',
extend: 'Ext.container.Container',
itemId: 'userPage',
requires: [
    'sample.view.register.RegistrationController',
    'sample.view.register.RegistrationModel'
],

// viewModel: 
//     data: 
//         title: 'Default Title'
//     
// ,
// initComponent: function () 
//     if (this.title) 
//         console.log('==========', this.title)
//     
// ,


width: 600,
bodyPadding: 10,
// layout: 'form',
autoScroll: 'true',

items: [
    xtype: 'textfield',
    fieldLabel: 'User Name',
    name: 'nameReg',
    itemId: 'nameReg',
    bind: 
        value: 'formData.nameReg'
    
]

); 在这里我尝试过使用视图模型，但我不知道它是如何工作的，如果您需要更多信息，请告诉我，提前谢谢

【参考方案1】：

在这种情况下，我基本上有两种选择：

共享视图模型：只要有意义，就为两个相关视图使用一个视图模型。通过数据绑定，第一个视图将数据写入视图模型，而第二个视图读取相同的数据。所以基本上你将这两个视图模型合并为一个。 将整体视图模型作为两个视图模型的父类，保存两个视图共享的数据。我们称之为“App.UserModel”。然后，您的两个视图模型应该扩展“App.UserModel”（而不是“Ext.app.ViewModel”）。同样，简单的数据绑定应该可以很好地完成这项工作。

【讨论】：

谢谢你的回答，你能分享一些选项2的代码吗，对我来说真的很难得到应该做什么