Develop Reference

How to show nested object with different Store from ExtJS Grid

I want to have REST operations on child object of a parent object on Ext Grid. I need to use rowExpander not rowWidget since I am using modern toolkit.
Here is my sample JSON data from my API:
{
"pagination": {
"page": 1,
"limit": 20,
"total": 1,
"hasPreviousPage": false,
"hasNextPage": false
},
"data": [
{
"id": 2,
"customer": "Mark",
"dateRented": "2021-02-09T21:18:40.667",
"movieRentals": [
{
"id": 5,
"rentalDetailDtoId": 2,
"movie": "Shingeki no Kyojin",
"dateReturned": null
},
{
"id": 6,
"rentalDetailDtoId": 2,
"movie": "Insidous 2",
"dateReturned": null
}
]
},
{
"id": 1,
"customer": "Samuel",
"dateRented": "2021-02-09T21:17:18.403",
"movieRentals": [
{
"id": 3,
"rentalDetailDtoId": 1,
"movie": "Home Alone",
"dateReturned": null
},
{
"id": 4,
"rentalDetailDtoId": 1,
"movie": "Neighbors",
"dateReturned": null
}
]
}
]
}
I would like to display it per Customer and I have a REST action of POST on the movieRentals object. I would like to use RowExpander but I am not sure how to make it work.
Here is my current ExtJS Grid code:
Ext.define('Vidly.view.rental.DisplayRentalsView', {
extend: 'Ext.grid.Grid',
xtype: 'displayrentalsview',
reference: 'rentallist',
title: 'Rental List',
controller: 'displayrentalsviewcontroller',
viewModel: 'rentalsviewmodel',
reference:'displayrentalsviewgrid',
selType: 'rowmodel',
selModel:
{
mode: 'SINGLE'
},
viewConfig:
{
stripeRows: true
},
listeners: {
selectionchange: 'onSelectionChange',
show: 'onShow',
},
bind: {
store: '{RentalListStore}'
},
itemConfig: {
viewModel: true
},
plugins: {
pagingtoolbar: true
},
items: [
{
xtype: 'container',
docked: 'top',
items: [
{
docked: 'left',
xtype: 'button',
ui: 'decline',
itemId: 'returnRental',
text: 'Return Rental',
reference: 'btnReturnRental',
handler: 'onReturnClick',
disabled: true,
}
]
},
],
columns: [
{
text: "Customer",
flex: 1,
dataIndex: 'customer',
editor:
{
allowBlank: false
},
},
{
text: "Movie",
flex: 1,
dataIndex: 'movieRental',
editor:
{
allowBlank: false
},
},
{
text: "Date Rented",
flex: 1,
dataIndex: 'dateRented',
editor:
{
allowBlank: false
},
renderer: function (value, metaData, record) {
if (value != null && value != "") {
var dateRented = new Date(Date.parse(value))
return Ext.Date.format(dateRented, 'm/d/Y')
}
else {
return "";
}
}
},
{
text: "Date Returned",
flex: 1,
dataIndex: 'dateReturned',
editor:
{
allowBlank: false
},
renderer: function (value, metaData, record) {
if (value != null && value != "") {
var dateRented = new Date(Date.parse(value))
return Ext.Date.format(dateRented, 'm/d/Y')
}
else {
return "";
}
}
}
],
});

Its always good to provide an fiddle when your asking something in ExtJs
I Provided a fiddle here, I hope this helps you along
https://fiddle.sencha.com/#view/editor&fiddle/3bpk
Ext.application({
name: 'Fiddle',
launch: function () {
const store = Ext.create('Ext.data.Store', {
data: [{
"id": 2,
"customer": "Mark",
"dateRented": "2021-02-09T21:18:40.667",
"movieRentals": [{
"id": 5,
"rentalDetailDtoId": 2,
"movie": "Shingeki no Kyojin",
"dateReturned": null
}, {
"id": 6,
"rentalDetailDtoId": 2,
"movie": "Insidous 2",
"dateReturned": null
}]
}, {
"id": 1,
"customer": "Samuel",
"dateRented": "2021-02-09T21:17:18.403",
"movieRentals": [{
"id": 3,
"rentalDetailDtoId": 1,
"movie": "Home Alone",
"dateReturned": null
}, {
"id": 4,
"rentalDetailDtoId": 1,
"movie": "Neighbors",
"dateReturned": null
}]
}]
});
Ext.create('Ext.grid.Grid', {
store: store,
plugins: {
rowexpander: true
},
height: 500,
width: '100%',
itemConfig: {
body: {
tpl: '<ul>' +
'<tpl foreach="movieRentals">' +
'<li>Movie: {movie}</li>' +
'</tpl>' +
'</ul>'
}
},
columns: [{
text: 'Name',
dataIndex: 'customer',
width: 200
}, {
text: 'dateRented',
dataIndex: 'dateRented',
width: 250
}],
layout: 'fit',
fullscreen: true
});
}
});
and by the way, move those renderers into your viewController. Duplicate code is always ugly :-)

Ok, you should take a deeper look at the https://docs.sencha.com/extjs/7.3.1/modern/Ext.grid.Row.html#events
itemConfig: {
body: {
tpl: '<p>Hello World</p>',
listeners: {
beforeshow: sender => {
console.log(sender);
// Here you can tell your record to fetch data
}
}
}
}
feel free to play arround with the fiddle
https://fiddle.sencha.com/#fiddle/3bq5&view/editor

SAPUI5 VIZ column chart integration. Invalid databinding error

I am trying to show VIZ chart from SAPUI5 but unable to bind data received from model. It throws [50017] - Invalid data binding error. I am posting my code below please have a look at it and help me find the causs.
var assignedContentData = {
"AssignedContentData": [{
"description": "Capital",
"newsletter": 2,
"press_release": 12,
"letter": 1,
"notice": 0,
"bulletin_memorandum": 0
}, {
"description": "NA",
"newsletter": 0,
"press_release": 0,
"letter": 0,
"notice": 1,
"bulletin_memorandum": 0
}, {
"description": "Equity",
"newsletter": 0,
"press_release": 4,
"letter": 0,
"notice": 5,
"bulletin_memorandum": 12
}]
};
var oAssignContentModel = new sap.ui.model.json.JSONModel({
data: assignedContentData
});
sap.ui.getCore().setModel(oAssignContentModel, "oAssignContentModel");
var assignedContentBarChart = new sap.viz.ui5.controls.VizFrame("assignedContentBarChart", {
vizType: "stacked_column"
});
var oDatasetAssignedContentBar = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Description",
value: "{description}"
}],
measures: [{
name: "Newsletter",
value: "{newsletter}"
}],
data: {
path: "/data/AssignedContentData"
}
});
var feedValueAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': ["Newsletter"]
});
var feedCategoryAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "categoryAxis",
'type': "Dimension",
'values': ["Description"]
});
var feedColorAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "color",
'type': "Dimension",
'values': ["Newsletter", "Press_Release", "Letter", "Notice", "Bulletin_memorandum"]
});
assignedContentBarChart.setVizProperties({
plotArea: {
dataLabel: {
visible: true,
formatString: "#,##0"
}
},
legend: {
title: {
visible: false
}
},
title: {
visible: true,
text: 'Bar Chart'
}
});
assignedContentBarChart.setDataset(oDatasetAssignedContentBar);
assignedContentBarChart.addFeed(feedValueAxis1);
assignedContentBarChart.addFeed(feedCategoryAxis1);

Your binding is incorrect. As your model name is oAssignContentModel, it must be reflected in the binding as well in the data property assignment:
var oDatasetAssignedContentBar = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
name: "Description",
value: "{description}"
}],
measures: [{
name: "Newsletter",
value: "{newsletter}"
}],
data: {
path: "oAssignContentModel>/data/AssignedContentData"
}
});
Or you can remove the name from the model, and you can leave the data binding as it is now:
sap.ui.getCore().setModel(oAssignContentModel);

Extjs 5, data model association & load nested data

trying to make this work....
I want to load nested data on two object model
Ext.application({
name : 'MyApp',
launch : function() {
Ext.define('MyApp.model.Address', {
extend: 'Ext.data.Model',
entityName: 'Address',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'addressLine',
type: 'string'
},
{
name: 'city',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
]
});
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
entityName: 'User',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'address',
reference: 'Address'
},
{
name: 'name',
type: 'string'
},
{
name: 'lastname',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
]
});
var user = new MyApp.model.User({
"id": 1,
"name": "Pedro",
"lastname": "Carbonell",
"address": {
"id": 1,
"addressLine": "Bailen 22",
"city": "Barcelona",
"created": 1420668866000
},
"created": 1420668866000
});
console.info(user);
console.info(user.getAddress());
}});
It's result on no error when created the user, but when I access to associated data via user.getAddress() it returned an exception:
Uncaught Error: The model ID configured in data ("[object Object]") has been rejected by the int field converter for the id fieldext-all-debug.js
Try to define proxy like memory or localstorage on model definitions, but the result it is the same.
Ext fiddle: https://fiddle.sencha.com/#fiddle/h2d
Any help will be appreciated!

Solved, but only find this solution: when use loadRawData...
var store = new Ext.data.Store({
model: MyApp.model.User
});
store.loadRawData({
"id": 1,
"name": "Pedro",
"lastname": "Carbonell",
"address": {
"id": 1,
"addressLine": "Bailen 22",
"city": "Barcelona",
"created": 1420668866000
},
"created": 1420668866000
});
console.info(store.first());
console.info(store.first().getAddress());
sample at this new fiddle: https://fiddle.sencha.com/#fiddle/h4e
you'r right, ext is a bit flaky, very....

I've been playing around with the code in your fiddle and not been able to get the association working the official way as of yet.
I simulated the functionality using this code:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}],
getAddress: function() {
if ('undefined' === this.data.address) {
return null;
}
return Ext.create('Address', this.data.address);
}
});
Basically I've removed the association and created a custom function to create a model record based off of the raw data passed in, You could also return a new, empty model if the address data does not exist instead of null, I used null as it's easier to determine whether you have a valid address record or not.
As already mentioned - this is not the official way to do this, I will have another play around with the fiddle and post a better solution once I find it, this may help in the meantime.

Using the original code, I made a few modifications and now it appears to be working.
Ext.application({
name : 'MyApp',
launch : function() {
Ext.define('MyApp.model.Address', {
extend: 'Ext.data.Model',
//entityName: 'Address',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'addressLine',
type: 'string'
},
{
name: 'city',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
],
hasMany: 'User'
});
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
//entityName: 'User',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'name',
type: 'string'
},
{
name: 'lastname',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
],
hasMany: { model: 'Address', name: 'Address' }
});
var user = new MyApp.model.User({
"id": 1,
"name": "Pedro",
"lastname": "Carbonell",
"address": {
"id": 1,
"addressLine": "Bailen 22",
"city": "Barcelona",
"created": 1420668866000
},
"created": 1420668866000
});
console.info(user);
console.info(user.data.address);
}
});

Is this the sort of thing you're after? I set Address manually on the User model. Not ideal but it's interpreted correctly as a record then.
Ext.define('MyApp.model.Address', {
extend: 'Ext.data.Model',
entityName: 'Address',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'addressLine',
type: 'string'
},
{
name: 'city',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
]
});
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
entityName: 'User',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'addressId',
reference: 'Address'
},
{
name: 'name',
type: 'string'
},
{
name: 'lastname',
type: 'string'
},
{
name: 'created',
type: 'date',
dateFormat: 'time',
persist: false
}
]
});
var user = new MyApp.model.User({
"id": 1,
"name": "Pedro",
"lastname": "Carbonell",
"created": 1420668866000
});
var addr = new MyApp.model.Address({
"id": 1,
"addressLine": "Bailen 22",
"city": "Barcelona",
"created": 1420668866000
});
user.setAddress(addr);
console.info(user);
console.info(user.getAddress());

Kendo Grid DropdownList And Insert template Error

I have been struggling with this issue and hit a roadblock. I have a kendo grid that has a dropdownlist.
Problem
When i edit a record by selecting a value in the DropdownList, the
field is not updated.
When i select the Add Command from the toolbar, a different
template tries to render and raises the error "Uncaught ReferenceError:
ParentMenu is not defined" in Chrome debugs. So nothing happens consequently.
When i comment out "values: parentRef" from the kendogrid columns definition all commands[Add,Edit] display properly
I have demonstrated the error i am experiencing here http://jsfiddle.net/BlowMan/5tNQy/
JS Code
$(function () {
var mbModel = kendo.data.Model.define({
id: "MenuId",
fields: {
"MenuId": {
type: "number"
},
"DisplayText": {
type: "string"
},
"MenuOrder": {
type: "number"
},
"MenuStatus": {
type: "boolean"
},
"HasKids": {
type: "boolean"
},
"ParentMenu": {
type: "number",
defaultValue: 1
}
}
});
var mbDataSource = new kendo.data.DataSource({
data: [{
"MenuId": 1,
"DisplayText": "Home",
"MenuOrder": 0,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}, {
"MenuId": 2,
"DisplayText": "Finance",
"MenuOrder": 1,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}]
});
var parentRef = [{
"value": 1,
"text": "Finance"
}, {
"value": 2,
"text": "Corp. Services"
}];
$("#menuBuilder1").kendoGrid({
columns: [{
field: "MenuId",
title: "Menu",
editable: true
}, {
field: "DisplayText",
title: "Name",
editable: true
}, {
field: "MenuOrder",
title: "Order",
editable: true
}, {
field: "MenuStatus",
title: "MenuStatus",
editable: true
}, {
field: "HasKids",
title: "Depends",
editable: true
}, {
field: "ParentMenu",
title: "ParentMenu",
values: parentRef
}, {
title: "Action",
command: ["edit"]
}],
toolbar: ["create"],
editable: "popup",
schema: {
model: mbModel
}
});
var mbObject = new kendo.data.ObservableObject({
data: mbDataSource,
//parentRef:[]
});
kendo.bind($("#menuBuilder1"), mbObject);
mbDataSource.bind("change", function (e) {
});
var grid = $("#menuBuilder1").data("kendoGrid");
grid.bind("save", function (e) {
var that = this;
that.refresh();
});
grid.bind("edit", function (e) {
});
$.ajax({
url: "/MenuBuilder/GetMenuWithKids",
dataType: "json",
type: "GET",
success: function (ret) {
mbObject.set("parentRef", ret);
}
});
});
HTML Code
<div id="menuBuilder1" data-bind="source:data"></div>
Am in a tight corner and any help will be much appreciated.

MustafaP solved Problem 1.
For problem 2,
I realised that i had placed the schema definition at the wrong place within the kendoGrid. I placed it at the bottom after the toolbar.
It should rather be placed just after the kendoGrid brackets
$("#menuBuilder1").kendoGrid({
schema: {
model: mbModel
},
columns: [{
field: "MenuId",
title: "Menu",
editable: true

Grid works great, but shows no data

So I have the grid.Panel here :
Ext.require([
'Ext.direct.*',
'Ext.data.*',
'Ext.grid.*'
]);
Ext.define('PersonalInfo', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email']
});
Ext.onReady(function() {
// create the Grid
Ext.create('Ext.grid.Panel', {
store: {
model: 'PersonalInfo',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'app/data/users.json',
reader: {
type: 'json',
root: 'users'
}
}
},
columns: [{
dataIndex: 'name',
width: 50,
text: 'ID'
}],
height: 450,
width: 700,
title: 'Velociraptor Owners',
renderTo: Ext.getBody()
});
});
And the users.json file here, who's extension is app/data/users.json:
{
"users": [
{ "name": "Name 1" , "email": "email#site.com" },
{ "name": "Name 2" , "email": "email#site.com" },
{ "name": "Name 3" , "email": "email#site.com" },
{ "name": "Name 4" , "email": "email#site.com" },
{ "name": "Name 5" , "email": "email#site.com" }
]
}
The grid displays on my browser (Firefox. IE9 doesn't display anything) but is not displaying the "name" field like I told it to. Any ideas?