ExtJS 5 Model Field Mapping

Question

I have a problem about mapping property of model fields.

First, this is my model:

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

And i have a store like this:

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

Now, if i use field name of json object directly as model field name, this code works perfectly (without nameProperty: 'mapping' line of writers). But when i map json object field names to something else only mapped names exists in record ( {'UserEmail', 'UserId', 'Name'} ). And if i add nameProperty: 'mapping' line to writers all properties of record are duplicated ( {'EMAIL', 'UserEmail', 'ID', 'UserId', 'NAME', 'Name'} ). This is the problem because when i try to save my record, there are 2 name property in my record and this confuses my backend.

Sorry for the long post, there is no potato here.

Thanks in advance.

Eko Junaidi Salam Eko Junaidi Salam · Accepted Answer · 2015-02-17T10:43:29

May I see your json data ?

In your case the proxy writer didn't point your root of your json data, try to change the properties like this below.

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

This is my json data :

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

This is my Model :

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

This is my proxy :

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

And the last, this's my columns of grid panel :

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

Sorry for the long answer.

ExtJS 5 Model Field Mapping

1 Answers