ExtJS 4.2

by Walter Rumsby

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext/gpl/4.2.0/resources/css/ext-all-neptune.css">
<div id="ct" style="margin: 5px"></div>

JavaScript

var sampleData = [{
    title: 'First Page',
    name: 'Foo'
}, {
    title: 'Second Page',
    name: 'Bar '
}, {
    title: 'Last Page',
    name: 'Baz'
}];

Ext.define('ExtMVC.model.Page', {
    extend: 'Ext.data.Model',
    fields: ['title', 'name']
});

Ext.Function.interceptBefore(Ext.Ajax, 'request', function (options) {
    console.log('Ext.Ajax.request called with the following options: ');
    console.dir(options);
}, Ext.Ajax);


var store = Ext.create('Ext.data.Store', {
    model: 'ExtMVC.model.Page',
    autoLoad: false,
    proxy: {
        type: 'ajax',
        reader: {
            type: 'json',
            root: 'data'
        },
        url: '/echo/json/',
        actionMethods: {
            read: 'POST'
        },
        extraParams: {
            'json': JSON.stringify({
                data: [{
                    title: 'Third Page',
                    name: '333'
                }]
            })
        }
    },
    data: sampleData
});

Ext.create('Ext.view.View', {
    itemTpl: '<div id="item">{title:htmlEncode}: {name:htmlEncode}</div>',
    itemSelector: '.item',
    store: store,
    renderTo: 'ct'
});

Ext.widget({
    xtype: 'button',
    text: 'load',
    renderTo: Ext.getBody(),
    handler: function () {
        try {
            store.load();
        } catch (e) {
            console.error(e);
        }
    }
});