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
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
],
/* Relation with Student Model */
hasMany: {
model: 'Book',
name: 'books'
}
});
Ext.define("Book", {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'title', type: 'string'}, //,mapping:'record[0].title' not working
{name: 'userId', type: 'int'}
]
});
var data = {
"success": "true",
"users": [
{
"id": "1",
"name": "shilpa",
"email": "[email protected]",
"books": [
{
"id": "10",
"title": "c++",
"userId": "1"
},
{
"id": "11",
"title": "Java",
"userId": "1"
}
]
}
]
};
var store = Ext.create('Ext.data.Store', {
model: "User",
autoLoad: true,
data: data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Users',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
},{
text: 'Books',
renderer: function (val, meta, record) {
var books = '';
record.books().each(function(bookRecord, index, count) {
books = books + bookRecord.get('title') + ',';
});
return books;
}
}
],
height: 200,
width: 500,
renderTo: Ext.getBody()
});