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" />
JavaScript
/* WITHOUT total_students IN UNIVERSITY MODEL */
remodel = function (uni_fields) {
//uni_fields = ['uni_id', 'uni_name', 'openingYear'];
Ext.define("University", {
extend: 'Ext.data.Model',
fields: uni_fields,
/* Relation with Student Model */
hasMany: {
model: 'Student',
name: 'students'
},
});
}
remodel(['uni_id', 'uni_name', 'openingYear']);
remodel(['uni_id', 'uni_name', 'openingYear','pikachu']);
Ext.define("Student", {
extend: 'Ext.data.Model',
fields: [
'stud_id', 'stud_name']
});
var data = [{
"uni_id": 1,
"uni_name": "Gujarat University",
"openingYear": 1980,
"students": [{
"stud_id": 1,
"stud_name": "Rishabh Shah"
}, {
"stud_id": 2,
"stud_name": "Rakesh Prajapati"
}, {
"stud_id": 3,
"stud_name": "Vaibhavi Shah"
}, {
"stud_id": 4,
"stud_name": "Jitu Mishra"
}, {
"stud_id": 5,
"stud_name": "Sonu Nigam"
}, {
"stud_id": 6,
"stud_name": "K.K."
}, {
"stud_id": 7,
"stud_name": "Amitabh Bachan"
}]
}, {
"uni_id": 2,
"uni_name": "Saurastra University",
"openingYear": 1985,
"students": [{
"stud_id": 1,
"stud_name": "Rakhi Sawant"
}, {
"stud_id": 2,
"stud_name": "Smit Patel"
}, {
"stud_id": 3,
"stud_name": "Kashyap Thaker"
}]
}, {
"uni_id": 3,
"uni_name": "North Gujarat University",
"openingYear": 1989,
"students": [{
"stud_id": 1,
"stud_name": "Angellina Jollie"
}, {
"stud_id": 2,
"stud_name": "Parag Raval"
}, {
"stud_id": 3,
"stud_name": "Harshal Patel"
}, {
"stud_id": 4,
"stud_name": "Harsha Bhogle"
}, {
"stud_id": 5,
...