<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- Extjs 6.0.0.640 css -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-triton/resources/theme-triton-all.css">

<!-- Extjs 6.0.0.640 ux-all.css -->
<link rel="stylesheet" type="text/css" href= "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/packages/ux/classic/triton/resources/ux-all.css">
  
<!-- Extjs 6.0.0.640 library -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
  
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/packages/ux/classic/ux.js"></script>
</head>
<body>
</body>
</html>
Ext.define('MyApp.model.Base', {
    extend: 'Ext.data.Model',
    schema: {
        namespace: 'MyApp.model'
    }
});

Ext.define('MyApp.model.Order', {
    extend: 'MyApp.model.Base',
    fields: [{
        name: 'customer_id', // It's required as "reference" property is not used. Its named after the parent model class name.
    }, {
        name: 'date',
        type: 'date',
        dateFormat: 'Y-m-d'
    }, {
        name: 'total'
    }], 
    //Proxy on the Order model to fetch data on demand
    proxy: {
        type: 'ajax',
        url: 'http://github.com/walkingtree/extjs-6-training-artifacts/blob/master/data/Orders.json',
        reader: {
            rootProperty: 'data'
        }
    }
});

Ext.define('MyApp.model.Customer', {
    extend: 'MyApp.model.Base',
    fields:[
        'id', 'name', 'phone'
    ],
    hasMany: 'Order' // Or configure as a store - {model:'Order', autoLoad:true}
});

Ext.define('MyApp.view.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',
    onSelect: function(grid, record){
        this.lookupReference('ordersgrid').setStore(record.orders());
        //load() called explicitly, as "orders" store is loaded on demand and not on instantiation.
        record.orders().load(); 
    }
});

Ext.define('MyApp.view.MainModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',
    stores: {
        customers:{
            model: 'MyApp.model.Customer',
            data: getData(),
            proxy: {
                type: 'memory'
            }
        }
    }
});


Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.Container',
    requires: [
        'MyApp.view.MainController',
        'MyApp.view.MainModel'
    ],
    controller: 'main',
    viewModel: 'main',
    
    padding: '5 0 5 0',
    
    layout: {
        type:'hbox',
        align: 'stretch'
    },
   
    defaults: {
        flex: 1,
        margin: 20
    },
    
    items: [{
       xtype: 'grid',
        title: 'Customers',
        bind: {
            store: '{customers}'
        },
        columns: [{
            text: 'ID',
            dataIndex: 'id',
            flex: 1
        }, {
            text: 'Name',
            dataIndex: 'name',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone',
            flex: 1
        }],
        listeners:{
            select: 'onSelect'
        }
    }, {
        xtype: 'grid',
        title: 'Orders',
        reference: 'ordersgrid',
        columns: [{
            text: 'Customer ID',
            dataIndex: 'customer_id',
            flex: 1
        }, {
            xtype: 'datecolumn',
            text: 'Date',
            dataIndex: 'date',
            format: 'Y-m-d',
            flex: 1
        }, {
            text: 'Total',
            dataIndex: 'total',
            flex: 1
        }]
    }]
});

Ext.application({
    name: 'MyApp',
    mainView: 'MyApp.view.main.Main'
});

function getData() {
    return [{
        "id": "1",
        "name": "Bob",
        "phone": "9876-543-210"
    }, {
        "id": "2",
        "name": "Tom",
        "phone": "8762-123-456"
    }, {
        "id": "3",
        "name": "Harry",
        "phone": "9123-254-632"
    }];
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.