ExtJS store/proxy doesn't send delete method to server

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

If you arrive at this question and you are using Ext JS 5 or 6, note that you need to call the erase method instead of the destroy method to make the proxy send a request to the server. That changed since version 5. — Christiaan Westerbeek

sha sha · Accepted Answer · 2012-03-15T01:04:12

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.

ExtJS store/proxy doesn't send delete method to server

2 Answers