EXTJS data store mapping

by elganz

HTML

<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css">

JavaScript

Ext.define("Model", {
    extend: "Ext.data.Model",
    fields: [
        {name: "id", type: "int"},
        {name: "name.name"},
        {name: "phone", mapping: "name.phone"},
        {name: "descr", type: "string", mapping:'description'}
    ]
});

// store with data that we will recieve from test echo ajax service
var Store = Ext.create("Ext.data.Store", {
    model: "Model",
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/echo/json/',
        //
        actionMethods: {read: 'POST'}, // echo ajax service required
        extraParams: {
            json: Ext.JSON.encode({
                root: [
                    {id: 1, name: {name:"John", phone: "123"}, description:"Fapfapfap"},
                    {id: 2, name: {name:"Danny", phone: "234"}, description:"Boobooboo"},
                    {id: 3, name: {name:"Tom", phone: "345"}, description:"Tralala"},
                    {id: 4, name: {name:"Jane", phone: "456"}, description:"Ololo"},
                ]
                })
        },
        reader: {
            type: 'json',
            root: 'root'
        }
    },
});

// and finally I have a grid panel
Ext.create("Ext.grid.Panel", {
    store: Store,
    columns: [
        {dataIndex: "id", header:"ID"},
        {dataIndex: "name.name", header:"Name", flex: 1, editor: "textfield"},
        {dataIndex: "phone", header:"Phone", flex: 1, editor: "textfield"},
        {dataIndex: "descr", header: "Description", flex: 2, editor: "htmleditor"}
    ],
    renderTo: Ext.getBody(),
});