ExtJS 5模型场映射

Question

我有关于映射模型字段属性的问题。

首先，这是我的模型：

Ext.define('app.model.userModel', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.field.Field'
    ],
    idProperty: 'UserId',
    fields: [
        {
            mapping: 'EMAIL',
            name: 'UserEmail',
            type: 'string'
        },
        {
            mapping: 'ID',
            name: 'UserId',
            type: 'string'
        },
        {
            mapping: 'NAME',
            name: 'Name',
            type: 'string'
        }
    ],
    proxy: {
        api: {
            read: readUrl,
            create: createUrl,
            update: updateUrl,
            destroy: destroyUrl
        },
        type: 'ajax',
        reader: {
            type: 'json'
        },
        writer: {
            type: 'json',
            allowSingle: false,
            writeAllFields: true,
            nameProperty: 'mapping'
        }
    }
});

我有这样的商店：

Ext.define('app.store.userStore', {
    extend: 'Ext.data.Store',

    requires: [
        'app.model.userModel',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    constructor: function (cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'userStore',
            model: 'app.model.userModel',
            autoLoad: true,
            pageSize: 1,
            proxy: {
                api: {
                    read: readUrl,
                    create: createUrl,
                    update: updateUrl,
                    destroy: destroyUrl
                },
                type: 'ajax',
                enablePaging: true,
                reader: {
                    type: 'json',
                    rootProperty: 'SuccessObjs',
                    totalProperty: 'Count'
                },
                writer: {
                    type: 'json',
                    allowSingle: false,
                    writeAllFields: true,
                    nameProperty: 'mapping'
                }
            }
        }, cfg)]);
    }
});

现在，如果我直接使用json对象的字段名称作为模型字段名称，则此代码可以正常工作（没有nameProperty: 'mapping'编写器行）。但是当我将json对象字段名称映射到其他内容时，只有映射名称存在于记录中（{'UserEmail', 'UserId', 'Name'}）。如果我将nameProperty: 'mapping'行添加到作者的所有记录属性都是重复的（{'EMAIL', 'UserEmail', 'ID', 'UserId', 'NAME', 'Name'}）。这是问题，因为当我尝试保存我的记录时，我的记录中有2个名称属性，这会混淆我的后端。

对不起，很长的帖子，这里没有土豆。

提前致谢。

Answer 1

我可以看看你的json数据吗？

在您的情况下，代理编写器没有指出您的json数据的根，尝试更改如下所示的属性。

writer: {
    type: 'json',
    writeAllFields: true,
    root: 'data',
    encode: true
},

这是我的json数据：

{
    "success": true,
    "message": "Loaded data",
    "total": 2,
    "data": [{
        "street_number": "1",
        "route": "Jl. Sultan Hasanuddin No. 1",
        "locality": "Jakarta Selatan - Indonesia",
        "administrative_area_level_1": "Special Capital Region of Jakarta",
        "administrative_area_level_2": "South Jakarta City",
        "administrative_area_level_3": "Kebayoran Baru",
        "administrative_area_level_4": "Kramat Pela",
        "point_of_interest": "Kejaksaan Agung RI",
        "country": "ID",
        "postal_code": "12130",
        "formatted_address": "Kejaksaan Agung, Kramat Pela, Kebayoran Baru, South Jakarta City, Special Capital Region of Jakarta 12130, Indonesia",
        "lat": "-6.240949",
        "lng": "106.7978621"
    }, {
        "street_number": "0",
        "route": "Jalan 17 Agustus, Manado",
        "locality": "",
        "administrative_area_level_1": "",
        "administrative_area_level_2": "Kota Manado",
        "administrative_area_level_3": "Kecamatan Wanea",
        "administrative_area_level_4": "",
        "point_of_interest": "Kantor Kejaksaan Tinggi Sulawesi Utara",
        "country": "ID",
        "postal_code": "",
        "formatted_address": "Kantor Kejaksaan Tinggi Sulawesi Utara, Jalan 17 Agustus, Manado, Kecamatan Wanea, Kota Manado, Indonesia",
        "lat": "1.469375",
        "lng": "124.843384"
    }]
}

这是我的模特：

Ext.define('APP.model.m_mstgis', {
    extend: 'Ext.data.Model',
    alias: 'widget.mstgisModel',
    fields: [{
            name: 'street_number',
            type: 'int'
        }, {
            name: 'rute',
            mapping: 'route'   ---> You can map your field in here
        }, 'locality', 'administrative_area_level_1',
        'administrative_area_level_2',
        'administrative_area_level_3',
        'administrative_area_level_4', 'point_of_interest',
        'country', 'postal_code', 'formatted_address', {
            name: 'lat',
            type: 'float'
        }, {
            name: 'lng',
            type: 'float'
        }
    ],
    idProperty: 'formatted_address'
});

这是我的代理人：

proxy: {
    type: 'ajax',
    api: {
        read: 'some_url/get',
        create: 'some_url/save',
        update: 'some_url/save',
        destroy: 'some_url/delete'
    },
    actionMethods: {
        read: 'POST',
        create: 'POST',
        update: 'POST',
        destroy: 'POST'
    },
    reader: {
        type: 'json',
        root: 'data',
        rootProperty: 'data',
        successProperty: 'success',
        messageProperty: 'message'
    },
    writer: {
        type: 'json',
        writeAllFields: true,
        root: 'data',
        encode: true
    },
    listeners: {
        exception: function(proxy, response, operation) {
            Ext.MessageBox.show({
                title: 'REMOTE EXCEPTION',
                msg: operation.getError(),
                icon: Ext.MessageBox.ERROR,
                buttons: Ext.Msg.OK
            });
        }
    }
},

最后，这是我的网格面板列：

this.columns = [{
    xtype: 'rownumberer'
}, {
    header: 'point_of_interest',
    filterable: true,
    dataIndex: 'point_of_interest'
}, {
    header: 'formatted_address',
    filterable: true,
    dataIndex: 'formatted_address'
}, {
    header: 'rute',
    filterable: true,
    dataIndex: 'rute'    ------> See this mapping field
}, {
    header: 'locality',
    filterable: true,
    hidden: true,
    dataIndex: 'locality'
}, {
    header: 'administrative_area_level_1',
    filterable: true,
    hidden: true,
    dataIndex: 'administrative_area_level_1'
}, {
    header: 'administrative_area_level_2',
    filterable: true,
    hidden: true,
    dataIndex: 'administrative_area_level_2'
}, {
    header: 'administrative_area_level_3',
    filterable: true,
    hidden: true,
    dataIndex: 'administrative_area_level_3'
}, {
    header: 'administrative_area_level_4',
    filterable: true,
    hidden: true,
    dataIndex: 'administrative_area_level_4'
}, {
    header: 'country',
    filterable: true,
    hidden: true,
    dataIndex: 'country'
}, {
    header: 'postal_code',
    filterable: true,
    dataIndex: 'postal_code'
}, {
    header: 'street_number',
    filterable: true,
    hidden: true,
    dataIndex: 'street_number'
}, {
    header: 'lat',
    filterable: true,
    hidden: true,
    dataIndex: 'lat'
}, {
    header: 'lng',
    filterable: true,
    hidden: true,
    dataIndex: 'lng'
}];

对不起，答案很长。