extjs 5存储同步绑定到选择hasMany

时间:2014-08-05 15:01:46

标签: javascript extjs extjs4 extjs5

如何获取绑定并过滤了viewModel.hasMany关系同步的商店?

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

});

1 个答案:

答案 0 :(得分:0)

这是我的代码,它可能不是最好的方法,但至少它是有效的。希望这可以帮到你一点。

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

SizeInfo模型

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