JSFiddle - React, Tailwind, and code Playground

by el_chief

HTML

<script src="http://dl.dropbox.com/u/1015920/Ext/Ext.ux.ajax.SimXhr.js"></script>
<script src="http://dl.dropbox.com/u/1015920/Ext/Ext.ux.ajax.Simlet.js"></script>
<script src="http://dl.dropbox.com/u/1015920/Ext/Ext.ux.ajax.JsonSimlet.js"></script>
<script src="http://dl.dropbox.com/u/1015920/Ext/Ext.ux.ajax.SimManager.js"></script>
<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray.css" />

JavaScript

Ext.define('Parent', {
    extend: 'Ext.data.Model',

    fields: ['pname'],
    
    proxy: {
        type: 'ajax',
        url: '/parents',
        reader: {
            type: 'json',
            root: 'parents'
        }
    }
});

Ext.define('Child', {
    extend: 'Ext.data.Model',

    fields: [
        'cname', 'parent_id'],

    belongsTo: [
        {
        model: 'Parent',
        getterName: 'getParent',
        foreignKey: 'parent_id'}
    ],

    proxy: {
        type: 'ajax',
        url: '/children',
        reader: {
            type: 'json',
            root: 'children'
        }
    }
});

Ext.define('Children', {
    extend:'Ext.data.Store',
    model:'Child'
});

Ext.define('Parents', {
    extend:'Ext.data.Store',
    model:'Parent'
});


Ext.define('Grid1', {
    extend: 'Ext.grid.Panel',
    renderTo:Ext.getBody(),

    title: 'My Grid Panel',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            store: Ext.create('Children'),
            columns: [
                {
                dataIndex: 'cname',
                text: 'Col1'}
            ],
            viewConfig: {

            }
        });

        me.callParent(arguments);
    }
});


Ext.application({
    launch: function() {

        var sim = Ext.ux.ajax.SimManager.init();

        sim.register({
            '/children': {
                responseText: '{success:true, children:[ {"cname":"asdf"} ]'
            }
        });

        var g = Ext.create('Grid1'); 
                
        g.store.load();
    }
});