这是我第一次使用javascript框架，我想在我的EXT JS应用程序中实现MVVM，数据来自我的WEB API（ASP.NET framework）。
我的问题是，我似乎不知道如何充分使用viewModel，它可以查看我的商店。我成功地在网格中绑定了ViewModel，但现在我不知道如何使用表单（模式）更新所选记录并同步我的存储（通过API发送更新请求）
我有一种感觉，我做的方式不对。我不知道如何在fiddle中实现这一点，所以我将在这里粘贴我的代码。
1.类型。js[型号]

Ext.define('VAM2.model.Genre', {
    extend: 'VAM2.model.Base',
    alias: 'model.genre',
    fields: [
        {name: 'GenreId', type: 'int'},
        {name: 'Code',  type: 'string'},
        {name: 'CreatedBy',  type: 'string'},

    ]
});

1.类型。js[存储]

Ext.define('VAM2.store.Genre', {
    extend: 'Ext.data.Store',
    alias: 'store.genre',
    model: 'VAM2.model.Genre',
    autoLoad: false,
    pageSize: 10,
    storeId: 'GenreId',

    proxy : {
        type : 'rest',
        actionMethods : {
           read : 'GET' 
        },
        cors:true,
        url: 'https://localhost:44332/api/Genre/GetGenresExtJs',
        api:{
            create: 'https://localhost:44332/api/Genre/CreateGenreExtJS',
            read: 'https://localhost:44332/api/Genre/GetGenresExtJs',
            update: 'https://localhost:44332/api/Genre/EditGenreExtJS',
            destroy: 'https://localhost:44332/api/Genre/CreateGenreExtJS'
        },
        useDefaultXhrHeader: false,
        reader: {
           type : 'json',
           headers: { 'Accept': 'application/json' },
           allDataOptions: {
                associated: true,
                persist: true
            },
           rootProperty : 'data',
           totalProperty: 'total'
        },
    }

});

1.GenreViewModel。js-我不确定这是否可以，但读取正在工作

Ext.define('VAM2.view.genre.GenreViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.genre',

    requires:[
        'VAM2.model.Genre'
    ],

    stores: {
        myGenres : {
            model: 'VAM2.model.Genre',
            autoLoad: true,
            proxy : {
                type : 'rest',
                actionMethods : {
                   read : 'GET' 
                },
                cors:true,
                url: 'https://localhost:44332/api/Genre/GetGenresExtJs',
                api:{
                    create: 'https://localhost:44332/api/Genre/CreateGenreExtJS',
                    read: 'https://localhost:44332/api/Genre/GetGenresExtJs',
                    update: 'https://localhost:44332/api/Genre/EditGenreExtJS',
                    destroy: 'https://localhost:44332/api/Genre/CreateGenreExtJS'
                },
                useDefaultXhrHeader: false,
                reader: {
                   type : 'json',
                   headers: { 'Accept': 'application/json' },
                   allDataOptions: {
                        associated: true,
                        persist: true
                    },
                   rootProperty : 'data',
                   totalProperty: 'total'
                },
            }
        }
    },

    data:{
        title:'Sample Binding'
    },

    formulas: {
        currentRecord: {
            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);
            }
        }
    }

});

1.视图--这是让人困惑的地方。我不知道如何将网格中的绑定数据放入表单模式，然后保存并同步我的存储。

Ext.define('VAM2.view.genre.GenreList', {
    extend: 'Ext.container.Container',
    xtype: 'myGenreList',

    requires: [
        'VAM2.view.genre.GenreController',
        'VAM2.view.genre.GenreViewModel',
        'Ext.grid.column.Boolean',
        'Ext.form.field.Checkbox',
        'Ext.form.field.TextArea',
        'Ext.form.field.Text'
    ],

    controller: "genre",
    viewModel: {
        type: "genre"
    },
    width:'100%',    
    layout: {
        type: 'vbox',
        pack: 'start',
        align: 'stretch'
    },
    style: {
        backgroundColor: '#f5f5f5'
    },

    items: [{
        xtype: 'grid',
        reference: 'groupGrid', //--> used in the viewmodel,
        bind: {
            title: '{title}',
            store: '{myGenres}'
        },
        columns: [{
            text:'GenreIdField',
            id:'GenreIdField',
            dataIndex:'GenreId',
            hidden:true
        },{
            text: 'Code',
            dataIndex: 'Code',
            flex:1
        }, {
            text: 'Created By',
            dataIndex: 'CreatedBy',
            flex: 1
        }],
        listeners:{
            select:'onGenreSelected_FORMA' //--> I'm thinking this will trigger                                 
                                          //-> a form (modal) containing the data to update
        }
    }]
});

举个小提琴的例子就好了！谢谢
屏幕截图：

This is where I would like to display form modal that can sync/update my store when I modify some data.