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

Question

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

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

例如:

Model:

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

<小时/>

View Model :

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

<小时/>

View :

 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

首先我想说，在我看来，你的做法是错误的。您不想通过从 viewmodel 获取数据来将数据发送到服务器。您希望通过模型或store上的代理将记录发送到服务器。 viewmodel 中的数据只能用于绑定(bind)到您的view。 store 和 models 是您的服务器数据。但是store可以通过viewmodel绑定(bind)(和过滤)到您的view。

Model-View-ViewModel 是一种模式，其中 model 用于您的数据(并通过 proxy 进行迁移)， view 表示您的数据，viewmodel 将您的模型 和 View 粘合在一起。

Now my answer.

您可以在 viewmodel 上使用公式来实现这一点。然后，您可以将网格的当前选择深度绑定(bind)到您的表单。

ViewModel:

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

<小时/>

View:

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}'
        }]
    }]
});

<小时/>

编辑模型或将模型添加到商店后，保存/同步您的商店或保存您的模型 。