Question

我有一个Form面板，其中包含一个文本字段和一个网格。现在，我想获取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

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

Model-View-ViewModel是一种模式，其中model代表您的数据（并通过proxy进行迁移），view代表您的数据，viewmodel代表您的数据将model和view粘在一起。

现在我回答。

您可以使用formulas上的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);
            }
        }
    }
});

查看：

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

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

2 个答案: