extjs 记录按所需属性销毁

extjs record destroy by desired property

本文关键字：属性 记录 extjs      更新时间：2023-09-26

我正在开发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 是我想要的记录属性 i，即 rec.id 我希望它是int类型。我希望请求是这样的：

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

我该怎么做？

我已经设置了一个小提琴来复制这个问题。

我只能通过将 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
    }]
}
我知道

这是一个旧帖子，但是您可以通过在模型中定义proxy.writer来发送所需的模型数据，在代理编写器定义中，您可以定义transform.fn，它将返回要发送到服务器的数据作为model.data：

writer: {
        type: 'json',
        allDataOptions:  {changes: true, critical: true},
        partialDataOptions: {changes: true, critical: true},
        encode: true,
        rootProperty: 'group',
        transform: {
            fn: function(data, request, isDraft, model) {
                if(request) {
                    if(request.getAction() == 'destroy') {
                        data.id = me.get('id');
                        data.type = me.get('type');
                    }else if(request.getAction() == 'create') {
                        delete(data.id);
                    }
                }
                return data;
            }
        }
    },
相关文章：