Updating an Ext Store via a Proxy

Demonstrates configuring a proxy to write model updates back to the server.

by Walter Rumsby

HTML

<h2>Faves</h2>
<div id="faves"></div>

CSS

body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.8em;
}

h2 {
    font-weight: bold;
    text-transform: uppercase;
}

.my-view {
    list-style: none;
}

.fave {
    font-weight: bold;
}

.fave:after {
    font-size: 10px;
    content: ' <3';
}

JavaScript

Ext.Ajax.on('requestcomplete', function (conn, response, options, eOpts) {
    console.log('AJAX request completed with the following options:');
    console.dir(options);
});

Ext.define('My.Model', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'number' },
        { name: 'name', type: 'string' },
        { name: 'fave', type: 'boolean', defaultValue: false }
    ]
});

Ext.define('My.Store', {
    extend: 'Ext.data.Store',
    model: 'My.Model',
    autoLoad: false,
    // autoSync: true to write back to the store
    autoSync: true,
    proxy: {
        type: 'ajax',
        api: {
            // URL endpoint for 'update' operation
            update: '/echo/json/'
        },
        reader: {
            type: 'json'
        },
        writer: {
            type: 'json',
            // writeAllFields: false to only send id and modified field(s)
            writeAllFields: false
        }
    }
});

var store = Ext.create('My.Store', {
    data: [
        { id: 1, name: 'Test' },
        { id: 2, name: 'Foo' },
        { id: 3, name: 'Bar', fave: true },
        { id: 4, name: 'Bah' }
    ]
});

Ext.create('Ext.view.View', {
    store: store,
    tpl: '<ul class="my-view"><tpl for="."><li class="my-item <tpl if="fave">fave</tpl>">{name:htmlEncode}</li></tpl></ul>',
    itemSelector: '.my-item',
    renderTo: 'faves',
    listeners: {
        itemclick: function (view, record, item, index, e, eOpts) {
            var isFave = record.get('fave');
            
            record.set('fave', !isFave);
        }
    }
});