JSFiddle - React, Tailwind, and code Playground
JavaScript
Ext.onReady(function () {
var data = {
"config": {
"name": "blah",
"id": 1,
"someconfig": [{
"name": "Services",
"tabs": [{
"id": 0,
"name": "Details",
"layout": "hbox"
}, {
"id": 1,
"name": "Sources",
"layout": "hbox"
}, {
"id": 2,
"name": "Paths",
"layout": "hbox"
}, {
"id": 3,
"name": "Ports",
"layout": "hbox"
}, {
"id": 4,
"name": "Levels",
"layout": "hbox"
}, {
"id": 5,
"name": "Notes",
"layout": "hbox"
}]
}, {
"name": "Services2",
"tabs": [{}]
}]
}
};
Ext.define('Config', {
extend: 'Ext.data.Model',
fields: ['name'],
hasMany: [{
name: 'someconfig',
model: 'Someconfig',
associationKey: 'someconfig'
}],
proxy: {
type: 'memory',
data: data,
reader: {
type: 'json',
root: 'config'
}
}
});
Ext.define('Someconfig', {
extend: 'Ext.data.Model',
fields: [
'name'],
hasMany: [{
name: 'tabs',
model: 'Tabs',
associationKey: 'tabs'
}]
});
Ext.define('Tabs', {
extend: 'Ext.data.Model',
fields: [
'id',
'name',
'layout'],
belongsTo: [{
name: 'tabs',
model: 'Someconfig',
associationKey: 'tabs'
}]
});
...