ExtJS Template

by el_chief

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray-debug.css" />
<script src="//extjs.cachefly.net/ext-4.1.0-gpl/ext-all-dev.js"></script>

JavaScript

/* this is a function to simulate ajax requests in jsfiddle */

function sim(proxy, data, delay) {
    if (typeof data !== 'string') {
        data = Ext.JSON.encode(data);
    }

    proxy.url = '/echo/json/';
    proxy.actionMethods.read = "POST";
    proxy.extraParams.json = data;
    proxy.extraParams.delay = typeof delay == 'undefined' ? 0 : delay;
}


Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [
        'id',
        'first_name',
        'last_name'
        ],

    hasOne: [
        {
        name: 'marital',
        model: 'Marital',
        associationKey: 'marital' // <- this is the same as what is in the JSON response
        }
    ],

    proxy: {
        type: 'ajax',
        url: 'whatever',
        reader: {
            type: 'json',
            root: 'items' // <- same as in the JSON response
        }
    }
});

Ext.define('Marital', {
    extend: 'Ext.data.Model',
    fields: [
            'id',
            'title'
        ]
});

/* simulate a json response with jsfiddle: */
sim(Person.proxy, {
    success: true,
    items: [{
        "id": "17",
        "last_name": "Smith",
        "first_name": "John",
        "marital": {
            "id": 1,
            "title": "Female"
        }}]
}, 1);

Person.load(17, {
    callback: function(record) {
        console.log(record.getMarital());
    }
});