JSFiddle - React, Tailwind, and code Playground

by acteon

HTML

<div id="outDiv"></div>

JavaScript

Ext.define("Kid", {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'age',
        type: 'int'
    }]
});

Ext.define("Father", {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'name',
        type: 'string'
    }],
    hasMany: {
        model: 'Kid',
        name: 'kids'
    }
});

var data = [{
    name: 'Don Griffin',
    kids: [{
        name: 'Aubrey ',
        age: 17
    }, {
        name: 'Joshua',
        age: 13
    }, {
        name: 'Cale',
        age: 10
    }, {
        name: 'Nikol',
        age: 5
    }, {
        name: 'Solomon',
        age: 0
    }]
}, {
    name: 'Don Griffin 2',
    kids: [{
        name: 'Aubrey 2',
        age: 17
    }, {
        name: 'Joshua 2',
        age: 13
    }, {
        name: 'Cale 2',
        age: 10
    }, {
        name: 'Nikol 2',
        age: 5
    }, {
        name: 'Solomon 2',
        age: 0
    }]
}, {
    name: 'Don Griffin 3',
    kids: [{
        name: 'Aubrey 3',
        age: 17
    }, {
        name: 'Joshua 3',
        age: 13
    }, {
        name: 'Cale 3',
        age: 10
    }, {
        name: 'Nikol 3',
        age: 5
    }, {
        name: 'Solomon 3',
        age: 0
    }]
}];


var fatherStore = Ext.create('Ext.data.Store', {
    model: 'Father',
    data: data,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json'
        }
    }
});


var tpl = new Ext.XTemplate('<tpl for=".">',
    "baba  {[values.get('name')]}\n", 
        '\t çocuklar {[values.kids().getCount()]} :\n',
            '<tpl for="this.getMyKids(values)">', 
                "\t\t{[values.get('name')]}\n",
            '</tpl>',
    '</tpl>', {
    getMyKids: function (values) {
        console.debug("getMyKids cout :" + values.kids().data.items.length);
        return values.kids().data.items;

    }
});
Ext.get("outDiv").setHTML(tpl.apply(fatherStore.data.items));