JSFiddle - React, Tailwind, and code Playground

by Sp3ctr

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'
    }]
  });

  Config.load(1, {
    success: function(record, operation) {
      console.log(record.get('name'), record);
      console.log(record.someconfig().getCount());
      console.log(record.someconfig().data.items[0].data);  // only prints out name and config_id
//      console.log(record.someconfig().tabs());  // doesn't exist
    }
  });
});