<link rel="stylesheet" type="text/css" href="https://cdnjs.cat.net/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all-debug_1.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all-debug.js"></script>

<script type="text/javascript">

Ext.application({

name: 'MyApp',

launch: function () {

Ext.create('Ext.data.Store', {

storeId: 'CustomersStore',

fields:[ 'id', 'title', 'approved'],

autoLoad: true,

autoSync: true,

// Creating a proxy

proxy:{

type: 'rest',

url: 'example2.json',

reader:{

type: 'json',

rootProperty: 'customers'

}

},

// Sorting data (Example: email) to be displayed on Grid

sorters:[

{

property: 'email'

}

]

});

// Creating a Class -> Then creating an alias -> then using the alias in

// { xtype: myalias}

Ext.define('CustomersGridPanel', {

extend: 'Ext.grid.Panel',

alias: 'widget.customersgridpanel', // alias to be used later

title: 'Customers',

store: Ext.data.StoreManager.lookup('CustomersStore'),

columns: [

{ text: 'ID', dataIndex: 'id' },

{ text: 'EMAIL', dataIndex: 'email', flex: 1 , minWidth:100, width:75 },

{ text: 'APPROVED', dataIndex: 'approved' }

]

});

Ext.create('Ext.container.Viewport',{

layout: 'fit',

items: [

{

xtype: 'panel',

resizable: false,

layout: 'border',

collapsed: false,

items:[

{

xtype: 'container',

region: 'center',

layout:{

type:'vbox',

align: 'stretch'

},

items: [

{

xtype: 'customersgridpanel',

},

{

xtype: 'splitter'

},

{

html: '<b>Presenters</b>',

flex: 2

}

]

},

{

html: '<b>Details</b>',

flex: 2,

region: 'east',

split: true

}

]

}

]

});

}

});