javascript - extjs 记录按所需属性销毁

Question

我正在开发 Exjs mvc 应用程序。
我有一个 Extjs 模型:

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

和一家商店:

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

以及一个包含以下列的网格面板:

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

在行:

 grid.getStore().destroy(rec);

创建一个ajax请求如下:

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

我希望删除操作请求的 id 是我想要的记录属性，即 rec.id 并且我希望它是 int 类型。我想要该请求是这样的:

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

我怎样才能做到这一点？

Answer 1

我设置了 fiddle复制该问题。

我只是通过将 destory 操作的 actionMethod 更改为 POST 并在模型上设置 idProperty 来实现此功能。

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
    }]
}