extjs record destroy by desired property

Question

I'm developing Exjs mvc application.
I have an Extjs model :

Ext.define('JC.model.File', {
   extend: 'Ext.data.Model',
   fields: [
       {name: 'id', type: 'int'},
       {name: 'fileName', type: 'string'},
       {name: 'fileSize', type: 'string'},
       {name: 'position', type: 'string'}
   ]
});

and a store:

Ext.define('JC.store.Files', {
   extend: 'Ext.data.Store',
   model: 'JC.model.File',
   proxy: {
       url: JC.Util.createUrl('upload/getfiles'),
       type: 'ajax',
       simpleSortMode: true,
       reader: {
           type: 'json',
           root: 'items',
           totalProperty: 'totalCount'
       },
       api: {
           create: '',
           read: undefined,
           update: undefined,
           destroy: JC.Util.createUrl('upload/deletefile')
       },

       actionMethods:{create: 'POST', read: 'GET', update: 'POST', destroy: 'GET'}
   }
});

and a grid panel with the following columns:

columns: [
    {header: 'id', dataIndex: 'id', flex: 1},
    {header: 'file name', dataIndex: 'fileName', flex: 1},
    {header: 'file size', dataIndex: 'fileSize', flex: 1},
    {header: 'position', dataIndex: 'position', flex: 1}, {
        xtype: 'actioncolumn', items: [
            {
                icon: 'css/images/tree/black-trash-16.png', // Use a URL in the icon config
                tooltip: 'Delete',
                handler: function(grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    grid.getStore().destroy(rec);
                }
            }
        ]
    }
],

at the line:

 grid.getStore().destroy(rec);

an ajax request is created as below:

http://localhost:8084/myserver/deletefile?_dc=1422789950411&id=JC.model.File-6

I want the id requested for delete operation be my desired property of record i,e rec.id and I want it to be int type.I want the request to be something like this:

http://localhost:8084/myserver/deletefile?_dc=1422789950411&id=6

How can I do that?

Answer 1

I have setup a fiddle to replicate the issue.

I only managed to get this working by changing the actionMethod for the destory action to POST and setting an idProperty on the model.

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.define('File', {
            extend: 'Ext.data.Model',
            idProperty: 'id',

            fields: [{
                name: 'id',
                type: 'int'
            }, {
                name: 'fileName',
                type: 'string'
            }, {
                name: 'fileSize',
                type: 'string'
            }, {
                name: 'position',
                type: 'string'
            }]
        });

        Ext.define('Files', {
            extend: 'Ext.data.Store',
            model: 'File',
            autoLoad: true,
            proxy: {
                url: 'data1.json',
                type: 'ajax',
                simpleSortMode: true,
                reader: {
                    type: 'json',
                    rootProperty: 'items',
                    totalProperty: 'totalCount'
                },
                api: {
                    create: '',
                    read: 'data1.json',
                    update: '',
                    destroy: 'delete.json',
                },

                actionMethods: {
                    create: 'POST',
                    read: 'GET',
                    update: 'POST',
                    destroy: 'POST'
                }
            }
        });

        var store = Ext.create('Files');

        Ext.create('Ext.grid.Panel', {
            title: 'Test',
            store: store,
            columns: [{
                header: 'id',
                dataIndex: 'id',
                flex: 1
            }, {
                header: 'file name',
                dataIndex: 'fileName',
                flex: 1
            }, {
                header: 'file size',
                dataIndex: 'fileSize',
                flex: 1
            }, {
                header: 'position',
                dataIndex: 'position',
                flex: 1
            }, {
                xtype: 'actioncolumn',
                items: [{
                    icon: 'css/images/tree/black-trash-16.png',
                    tooltip: 'Delete',
                    width:50,
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        rec.erase();
                    }
                }]
            }],
            height: 300,
            width: 600,
            renderTo: Ext.getBody()
        });
    }
});

// Sample JSON Data
{
    "success": true,
    "totalCount": 5,
    "items": [{
        "id": 1,
        "fileName": 'file1.png',
        "fileSize": 93204,
        "position": 1
    }, {
        "id": 2,
        "fileName": 'file2.png',
        "fileSize": 93204,
        "position": 1
    }, {
        "id": 3,
        "fileName": 'file3.png',
        "fileSize": 93204,
        "position": 1
    }, {
        "id": 4,
        "fileName": 'file4.png',
        "fileSize": 93204,
        "position": 1
    }, {
        "id": 5,
        "fileName": 'file5.png',
        "fileSize": 93204,
        "position": 1
    }]
}