当我使用表单 (onUpdateClick) 更新有界记录时如何同步我的商店。我正在使用 Extjs 7.5 (Sencha CMD)

Question

这是我第一次使用 javascript 框架，我想在我的 EXT JS 应用程序中实现 MVVM 并且数据来自我的 WEB API（ASP.NET 框架）。

我的问题是，我似乎不明白如何充分使用查找我的商店的 viewModel。我成功地将我的 ViewModel 绑定到我的网格中，但现在我不知道如何使用表单（模态）更新所选记录并同步我的商店（通过 API 发送更新请求）

我感觉我做错了。我不知道如何在 fiddle 中执行此操作，所以我将在此处粘贴我的代码。

Genre.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'},

    ]
});

Genre.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'
        },
    }

});

GenreViewModel.js - 我不确定这是否可以，但是 read 正在工作

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

视图 -- 这是令人困惑的地方。我不知道如何将网格中的有界数据放入表单模式，然后保存并同步我的商店。

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

有一个fiddle例子就好了！谢谢！

截图：

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

Answer 1

要执行 store.sync()，您需要先在 record 上设置值。

示例没有 ViewModel： https://fiddle.sencha.com/#fiddle/3isg&view/editor

select: function (grid, record) {
    console.log(record);

    let win = Ext.create("Ext.window.Window", {
        title: 'Edit',
        modal: true,
        autoShow: true,
        width: 400,
        height: 500,
        controller: {},
        items: [{
            xtype: 'form',
            reference: 'form',
            fieldLabel: 'name',
            items: [{
                xtype: 'textfield',
                name: 'name'
            }]
        }],
        buttons: [{
            text: 'cancel',
            handler: function () {
                win.close();
            }
        }, {
            text: 'save',
            handler: function () {
                var values = this.lookupController().lookup('form').getValues();
                record.set(values);
                grid.getStore().sync({
                    scope: this,
                    success: function () {
                        win.close();
                        Ext.toast({
                            html: 'Well done',
                            align: 't'
                        });
                    },
                    failure: function () {
                        Ext.toast({
                            html: 'Problem occurred',
                            align: 't'
                        });
                    }
                });

            }
        }],
        listeners: {
            afterrender: function () {
                this.lookupController().lookup('form').loadRecord(record);
            }
        }
    })
}

当我使用表单 (onUpdateClick) 更新有界记录时如何同步我的商店。我正在使用 Extjs 7.5 (Sencha CMD)

How to sync my Store when I update the bounded record using form (onUpdateClick). I'm using Extjs 7.5 (Sencha CMD)

extjs

mvvm

asp.net-web-api

sencha-cmd

extjs-grid