Question

I’m trying to create simple ExtJs application that manages Users and User’s Roles. Set of REST services provide this functionality on back end.
When I assign a new Role to a User, appropriate data store sends POST (create) requests to the service. However when I remove existing Role from a User, it’s removed only from store locally without sending DELETE request to the service.
Here is my code:

Model:

Ext.define('UserRole', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'Id', mapping: "Id" },
        { name: 'RoleId', mapping: "RoleId" },
        { name: 'UserId', mapping: "UserId" }
    ]
});

Store With proxy:

Ext.define('UserRoleStore', {
    extend: 'Ext.data.Store',
    model: 'UserRole',

    autoload: false,

    proxy: {

        type: 'ajax',
        reader: {
            type: 'json',
            root: 'd.results'
        },        
        api: {
            read: '/accessmanager.svc/Users(\'{userid}\')/Roles?$format=json',
            create: '/accessmanager.svc/UserRoles?$format=json',
            update: '/accessmanager.svc/UserRoles?$format=json',
            destroy: '/accessmanager.svc/UserRoles?$format=json'
        },

        updateApiUrlWithUserId: function (userId) {
            this.api.read = this.api.read.replace('{userid}', userId);
        }

    }
});

Method that based on selected checkboxes updates the UserRole store

    var chekboxes = Ext.ComponentQuery.query('userdetails #roleslist')[0];

    var selectedUserId = this.selectedUserId;
    var selectedUserRoleStore = this.selectedUserRoleStore;
    Ext.each(chekboxes.items.items, function (cb) {
        var exists = false;            
        Ext.each(selectedUserRoleStore.data.items, function (cs) {
            if (cs.data.RoleId === cb.inputValue) {
                exists = true;                    
            }                
        });
        if (cb.getValue() && !exists) {
            var newRole = Ext.create('UserRole', { RoleId: cb.inputValue, UserId: selectedUserId });
            selectedUserRoleStore.add(newRole);

        } else if (exists && !cb.getValue()) {
            // delete existing role
            var record = selectedUserRoleStore.findRecord("RoleId", cb.inputValue);
            selectedUserRoleStore.remove(record);                
        }
    });
    selectedUserRoleStore.sync();

Answer 1

Presumably your Id field is assigned on the server end when record is created. Correct? First try to specify idProperty: ‘Id’ in the model. Default value for this is ‘id’ but I think these are case sensitive.

Using idProperty ExtJs recognizes records as being ‘dirty’ and required to be updated on the server end.