ExtJs 如何在 ViewModel 字段中绑定网格记录？

Question

我有一个带有一个文本字段和一个网格的表单面板。现在，我想取userinput 并通过ViewModel 将值作为json 发送到服务器。

这里的问题是，我可以绑定文本字段，因此我将文本字段值作为视图模型中的一个参数，但是如何在viewMolde.getData() 中获取选定的网格行数据作为第二个参数。

例如：

型号：

 Ext.define('UserModel', {
     extend: 'Ext.data.Model',
     fields: [{
         name: "name",
         type: "string"
     }, {
         name: "gridRecord",
         type: "auto"
     }]
 });

---

查看模型：

Ext.define('QAVM', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.QAVM',
    model: 'UserModel'
});

---

查看：

 Ext.define('View', {
     extend: 'Ext.form.Panel',
     xtype: 'app-test',
     viewModel: 'QAVM',
     items: [{
         xtype: 'textfield',
         fieldLabel: 'TestInt',
         bind: '{name}' /**ABLE TO BIND and GETTING VALUE In viewModel.getData()*/
     }, {
         xtype: 'grid',
         title: 'Simpsons',
         formBind: true,
         store: 'storeName',
         bind: {
             selection: 'gridSelectedRecord'
         }, //HOW TO BIND GRID SELECTED RECORD TO MODEL'S SECOND FIELD "gridRecord"
         columns: [{
             text: 'Address-1',
             dataIndex: 'addr'
         }, {
             text: 'Pincode',
             dataIndex: 'pincode',
             flex: 1
         }]
     }]
 });

---

Answer 1

首先我想说，imo 你的方法是错误的。您不想通过从viewmodel 获取数据来将数据发送到服务器。您希望通过model 或store 上的proxy 将您的记录发送到服务器。您的viewmodel 中的数据只能用于绑定到您的view。 store 和 models 是您的服务器数据。但是store 可以通过viewmodel 绑定（和过滤）到您的view。

Model-View-ViewModel 是一种模式，其中model 用于您的数据（并通过proxy 迁移），view 用于表示您的数据，viewmodel 用于粘合您的model 和您的@987654341 @一起。

现在我的答案。

您可以在您的viewmodel 上使用formulas。然后，您可以将网格的当前选择深度绑定到您的表单。

视图模型：

Ext.define('MyApp.view.group.GroupsModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.group-groups',

    stores: {
        allgroups: {
            source: 'Groups',
            sorters: {
                property: 'name',
                direction: 'ASC'
            }
        }
    },
    data: {
        title: 'Groups'
    },
    formulas: {
        currentRecord: {
            // We need to bind deep to be notified on each model change
            bind: {
                bindTo: '{groupGrid.selection}', //--> reference configurated on the grid view (reference: groupGrid)
                deep: true
            },
            get: function(record) {
                return record;
            },
            set: function(record) {
                if (!record.isModel) {
                    record = this.get('records').getById(record);
                }
                this.set('currentRecord', record);
            }
        }
    }
});

---

查看：

Ext.define('MyApp.view.group.Groups', {
    extend: 'Ext.container.Container',
    xtype: 'groups',

    requires: [
        'MyApp.view.group.GroupsController',
        'MyApp.view.group.GroupsModel',
        'Ext.grid.column.Boolean',
        'Ext.form.field.Checkbox',
        'Ext.form.field.TextArea',
        'Ext.form.field.Text'
    ],

    controller: "group-groups",
    viewModel: {
        type: "group-groups"
    },

    layout: {
        type: 'hbox',
        pack: 'start',
        align: 'stretch'
    },
    style: {
        backgroundColor: '#f5f5f5'
    },

    items: [{
        xtype: 'grid',
        reference: 'groupGrid', //--> used in the viewmodel
        flex: 1,
        bind: {
            title: '{title}',
            store: '{allgroups}'
        },
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Description',
            dataIndex: 'description',
            flex: 1
        }, {
            xtype: 'booleancolumn',
            text: 'Active',
            trueText: 'Yes',
            falseText: 'No',
            dataIndex: 'isActive'
        }]
    }, {
        xtype: 'form',
        title: 'Details',
        bodyPadding: 15,
        minWidth: 300,
        split: true,
        defaults: {
            xtype: 'textfield',
            anchor: '100%',
            allowBlank: false,
            enforceMaxLength: true
        },
        items: [{
            fieldLabel: 'Name',
            bind: '{currentRecord.name}' //--> get current selected record from viewmodel
        }, {
            xtype: 'textarea',
            fieldLabel: 'Description',
            bind: '{currentRecord.description}',
            height: 120
        }, {
            xtype: 'checkboxfield',
            fieldLabel: 'Active',
            bind: '{currentRecord.isActive}'
        }]
    }]
});

---

编辑model 或将模型添加到store 后保存/同步store 或保存model。

Answer 2

在 extjs 6 上测试。

{
    xtype: 'grid',
    bind: {
        store: '{gridStore}',
        selection: '{selectedRow}' //--> used in the viewmodel
    }
}