JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-debug.css"
/>
CSS
h2.response-label {
font-size: 20px;
margin: 10px;
}
caption {
text-decoration:underline;
padding: 5px;
font-size: 14px;
}
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
table
{
width:100%;
}
th
{
height:20px;
}
JavaScript
Ext.define("ResponseModel", {
extend: 'Ext.data.Model',
fields: [],
hasMany: [{
model: 'Sromain',
name: 'sromain'
}, {
model: 'Branch',
name: 'branches'
}
]
});
Ext.define("Sromain", {
extend: 'Ext.data.Model',
fields: [
'corporation',
'dbName',
'prijmyCelk',
'nakladyCelk',
'ziskCelk',
'neuhrVydCelk',
'neuhrPrijCelk',
'dph'],
belongsTo: 'ResponseModel'
});
Ext.define("Branch", {
extend: 'Ext.data.Model',
fields: [
'branch_name',
'branch_code',
'strediskoprijmyCelk',
'strediskonakladyCelk',
'strediskoziskCelk',
'strediskoneuhrVydCelk',
'strediskoneuhrPrijCelk',
'streddphCelk'],
belongsTo: 'ResponseModel'
});
var data =
{
"success": "true",
"data": {
"sromain": [
{
"corporation": "DEV 1 s.r.o.",
"dbName": "dev_1_s_r_o_",
"prijmyCelk": "2 106,00 €",
"nakladyCelk": "2 049,00 €",
"ziskCelk": "57,00 €",
"neuhrVydCelk": "2 106,00 €",
"neuhrPrijCelk": "2 049,00 €",
"dph": "9,52 €"
}
],
"branches": [
{
"branch_name": "Bratislava",
"branch_code": "BA",
"strediskoprijmyCelk": "180,00 €",
"strediskonakladyCelk": "0,00 €",
"strediskoziskCelk": "180,00 €",
"strediskoneuhrVydCelk": "180,00 €",
"strediskoneuhrPrijCelk": "0,00 €",
"streddphCelk": "30,00 €"
},
{
"branch_name": "Banská Bystrica",
"branch_code": "BB",
"strediskoprijmyCelk": "600,00 €",
"strediskonakladyCelk": "0,00 €",
"strediskoziskCelk": "600,00 €",
...