extjs 5 商店同步绑定到选择 hasMany

Posted 2023-02-26

【中文标题】extjs 5 商店同步绑定到选择 hasMany

【英文标题】：extjs 5 store sync on binding to selection hasMany

【发布时间】：2014-08-05 15:01:45

【问题描述】：

如何获取绑定和过滤了 viewModel.hasMany 关系的 store 同步？

我在 extjs5 中有两个网格面板。说第一个网格是组和第二个用户。我将组网格绑定到 viewModel stores.groups。该组存储正在工作并且还通过模型代理同步（模型绑定在 viewModel 中）。第二个网格通过bind:groupsReference.selection.users 绑定到同一个viewModel。绑定有效。在选择组时，过滤用户。更改某些用户数据会将用户记录标记为脏。

问题：脏用户不再自动同步，我也无法弄清楚如何手动同步。我怎样才能让 autoSynced 在这里工作？如何触发手动同步？

除了 hasMany/belongsTo 关系之外，用户组的模型是相同的：

Ext.define('MyApp.model.Groups', 
    extend: 'Ext.data.Model',

    fields: [
         name: 'id', type: 'int' ,
         name: 'groupname', type: 'auto' 
    ],
    autoLoad: true,
    autoSync: true,
    proxy: 
        type: 'rest',
        url: '/api/groups',
        reader: 
            type: 'json',
            rootProperty: 'data',
            successProperty: 'success'
        ,
        writer: 
            type: 'json'
        
    ,
    hasMany: 
        model: 'MyApp.model.Users',
        store:'MyApp.model.Users',
        name: 'users',
        foreignKey:'testId',
    
);

还有视图模型

Ext.define('MyApp.view.main.MainModel', 
    extend: 'Ext.app.ViewModel',
    requires: ['MyApp.model.Groups','MyApp.model.Users'],
    alias: 'viewmodel.main',
    stores: 
        groups: 
            model: 'mfct.model.Experiment',
            autoLoad:true,
            autoSync:true
        ,
        users: 
            model: 'mfct.model.Variation',
            autoLoad:true,
            autoSync:true
        
    

);

【问题讨论】：

我也有同样的问题。如果你解决了请告诉我..

我还没有真正解决它。在网格中添加了保存按钮并手动触发保存

感谢 Manuel，我昨天做了一些研究，发现 extjs 将创建一个关联存储（这是一个默认存储，它将获取模型中定义的代理）并在使用时将其传递给网格选择绑定。我在定义 hasMany 关联时尝试传递 storeConfig，但它不起作用。我最终在网格中添加了重新配置事件的侦听器，并将 autoSync 属性设置为 true。

听起来很有趣，你能把代码分享给我吗？在定义 hasMany 关联时，您是如何尝试传递 storeConfig 的？不知道这是可能的吗？这是一个错误吗？还是缺少功能？我对extjs很陌生，你能分享一下代码吗？如何绑定到重新配置事件？

【参考方案1】：

这是我的代码，它可能不是最好的方法，但至少它是有效的。希望这对您有所帮助。

FabricOrder 模型

Ext.define('MyApp.model.FabricOrder', 
    extend: 'Ext.data.Model',

    requires: [
        'MyApp.model.SizeInfo'
    ],

    fields: [
        name: '_id', type: 'string',
        name: 'styleno', type: 'string',
        name: 'modelname', type: 'string',
        name: 'colour', type: 'string',
        name: 'contractno', type: 'string',
        name: 'total', type: 'int',
        name: 'deliverydate', type: 'date', dateFormat: 'Y-m-d',
        name: 'comment', type: 'string'
    ],

    hasMany: [
        model: 'MyApp.model.SizeInfo',
        name: 'sizes'
        // This is not working in Extjs 5.0.0
        //storeConfig: 
        //   autoSync: true,
        //   proxy: //etc.
        //
    ],

    idProperty: '_id'
);

尺寸信息模型

Ext.define('MyApp.model.SizeInfo', 
    extend: 'Ext.data.Model',

    fields: [
        name: 'size', type: 'string',
        name: 'amount', type: 'int'
    ]
);

视图模型

Ext.define('MyApp.view.fabric.FabricModel', 
    extend: 'Ext.app.ViewModel',

    requires: [
        'MyApp.model.FabricOrder'
    ],

    alias: 'viewmodel.fabric',

    data: 

    ,

    stores: 
        fabricOrders: 
            model: 'MyApp.model.FabricOrder',
            pageSize: 20,
            proxy: 
                type: 'ajax',
                actionMethods: 
                    create: 'POST',
                    read: 'POST',
                    update: 'POST',
                    destroy: 'POST'
                ,
                api: 
                    create: '/createFabricOrder',
                    read: '/loadFabricOrder',
                    update: '/updateFabricOrder',
                    destroy: '/deleteFabricOrder'
                ,
                reader: 
                    type: 'json',
                    rootProperty: 'fabricorders',
                    totalProperty: 'total'
                
            ,
            autoSync: true,
            autoLoad: start: 0, limit: 20,

            onCreateRecords: function(records, operation, success) 
                console.log(records);
            ,

            onUpdateRecords: function(records, operation, success) 
                // If update failed, reject all changes
                if(!success) 
                    // Call rejectChanges method of the store
                    this.rejectChanges();

                    Ext.Msg.show(
                        title: 'Update Failed',
                        message: 'The changes you have made are rejected.',
                        buttons: Ext.Msg.OK,
                        icon: Ext.Msg.ERROR
                    );
                
            ,

            onDestroyRecords: function(records, operation, success) 
                console.log(records);
            
        ,

        sizeInfos: 
            model: 'MyApp.model.SizeInfo',
            proxy: 
                type: 'ajax',
                actionMethods: 
                    create: 'POST',
                    read: 'POST',
                    update: 'POST',
                    destroy: 'POST'
                ,
                api: 
                    create: '/createFabricOrder',
                    read: '/loadFabricOrder',
                    update: '/updateFabricOrder',
                    destroy: '/deleteFabricOrder'
                ,
                reader: 
                    type: 'json',
                    rootProperty: 'fabricorders'
                
            ,

            autoLoad: false,
            autoSync: false,

            onCreateRecords: function(records, operation, success) 
                console.log(records);
            ,

            onUpdateRecords: function(records, operation, success) 
                // If update failed, reject all changes
                if(!success) 
                    // Call rejectChanges method of the store
                    this.rejectChanges();

                    Ext.Msg.show(
                        title: 'Update Failed',
                        message: 'The changes you have made are rejected.',
                        buttons: Ext.Msg.OK,
                        icon: Ext.Msg.ERROR
                    );
                
            ,

            onDestroyRecords: function(records, operation, success) 
                console.log(records);
            
        
    
); 

视图控制器

Ext.define('MyApp.view.fabric.FabricController', 
    extend: 'Ext.app.ViewController',

    alias: 'controller.fabric',

    id: 'fabricController',

    init: function() 
         this.control(
            'grid[name=fabricgrid]': 

            ,
            'grid[name=sizegrid]': 
                reconfigure: 'onSizeGridReconfigure'
            
         );
     ,

    onSizeGridReconfigure: function(gird, store, columns, oldStore, oldColumns, eOpts) 
        if(store) 
            // Override the default association store settings
            store.autoSync = true;
            store.proxy = this.getViewModel().getStore('sizeInfos').getProxy();
            store.onCreateRecords = this.getViewModel().getStore('sizeInfos').onDestroyRecords
            store.onUpdateRecords = this.getViewModel().getStore('sizeInfos').onUpdateRecords;
            store.onDestroyRecords = this.getViewModel().getStore('sizeInfos').onDestroyRecords
        
    
);