I have a Nested View bound to a Tree Store.
If I use static data within the store, the view gets populated with this data.
But, If I try to load the store via ajax proxy (JSON), I can see that the store has got the data but the view does not populate this data !
I have been stuck on this for days now. Help !
Tree Store
Ext.define('MyApp.store.CategoriesNested', {
extend: 'Ext.data.TreeStore',
config: {
model: 'MyApp.model.CategoriesNested',
defaultRootProperty: 'data',
autoLoad: true,
autoSync: true,
data:[{
"category_id": 1,
"text": 'Clothing',
"data":[{
"category_id": 11,
"text": 'Tops and Tees',
"leaf":true,
}]
}, {
"category_id": 2,
"text": 'Footwear',
"data":[{
"category_id": 22,
"text": 'Casual Shoes',
"leaf":true,
},{
"category_id": 23,
"text": 'Sports Shirts',
"leaf":true,
}]
}],
}
});
The above works fine. But if i try to load from JSON, this populates the store (inspected the store using chrome web inspector). But the view does not reflect this !
Ext.define('MyApp.store.CategoriesNested', {
extend: 'Ext.data.TreeStore',
config: {
model: 'MyApp.model.CategoriesNested',
autoLoad: true,
autoSync: true,
proxy:{
type: 'ajax',
url:'categories.json',
reader:{
type: 'json',
rootProperty: 'data'
}
}
}
});
categories.json
{
"data": [{
"category_id": 1,
"text": 'Clothing',
"data":[{
"category_id": 11,
"text": 'Tops and Tees',
"leaf":true,
}]
}, {
"category_id": 2,
"text": 'Footwear',
"data":[{
"category_id": 22,
"text": 'Casual Shoes',
"leaf":true,
},{
"category_id": 23,
"text": 'Sports Shirts',
"leaf":true,
}]
}]
}
What am i doing wrong ?
EDIT
Ok, I realize that if this Nested List is set directly on the viewport, then it shows the data.
But , currently the structure is like this:
Viewport > Tab Panel > Navigation View > Panel > Nested List
Again, the nestedlist shows data when I hardcode the data within the store. But when i read from JSON, it does not show the data. BUT, if I try to set the view directly on the viewport, then the data is shown !
Why does this happen ?
OK solved it. I applied the config
layout: 'fit'
for the parent panels. This worked.
Related
I'm trying to create custom controller for my Strapi (v3.6.10) model, but have a problem with populating one specific field. Here are my models:
Parent model:
{
"kind": "collectionType",
"collectionName": "clinic_pages",
"info": {
"name": "clinic-page",
},
"attributes": {
"clinic": {
"model": "clinic"
},
...otherParentModelFields,
}
}
Clinic:
{
"kind": "collectionType",
"collectionName": "clinics",
"attributes": {
...otherFields,
"schedule": {
"type": "component",
"repeatable": true,
"component": "clinic.schedule"
},
}
}
Schedule:
{
"collectionName": "components_clinic_schedules",
"info": {
"name": "schedule",
},
"attributes": {
"time": {...},
"day": {...}
}
}
I need to populate only few fields from parent model, including clinic. So I'm using this query:
await strapi.services[MODEL].findOne(ctx.query) and receiving full schedule data in response:
{
...otherFieldsOfModel,
clinic: {
id: 1,
...otherFields,
schedule: [
{ id: 1, time: '9:00', day: 'monday' },
{ id: 2, time: '10:00', day: 'tuesday' }
]
}
}
That's fine, I see clinic and schedule, and all other fields in parent model. But then I wand to add populate to reduce size of those other fields and what I got?. Every time I'm getting anything instead of populated data for clinic.schedule even if I'm adding it to populate list. In all this cases:
await strapi.services[MODEL].findOne(ctx.query, {});
await strapi.services[MODEL].findOne(ctx.query, {clinic: true});
await strapi.services[MODEL].findOne(ctx.query, ['clinic']);
await strapi.services[MODEL].findOne(ctx.query, ['clinic', 'clinic.schedule', 'clinic.schedule.day', 'clinic.schedule.time']);
and so on... I mean I tried any possible syntax variant and don't even got a schedule: null. This field not returning anymore in the response. How do I populate this collection?
P.S. Yes, I know that Strapi is v4 already, unfortunately I can't update it for now.
I have a Kendo grid where I'm trying to add a delete feature. My datasource looks like:
var datasource = new kendo.data.DataSource({
transport: {
read: {
url: Router.action("Admin", "GetScansForMailItem", { mailItemIdnt: detailinit.data.MailItemIdnt }),
dataType: "json"
},
destroy: {
url: Router.action("Admin", "DeleteScan"),
type: "post"
}
},
model: {
id: "ScanIdnt",
fields: {
ScanIdnt: {editable: false, nullable: false}
}
},
pageSize: 5
});
I added the model part because this answer, however it made no difference.
The actual grid looks like:
.kendoGrid({
dataSource: datasource
scrollable: false,
sortable: true,
pageable: true,
editable: "inline",
columns: [{
field: "ScanIdnt",
title: "Scan ID"
}, {
field: "CreatedDate",
title: "Created",
template: "#= kendo.parseDate(CreatedDate, 'yyyy/MM/dd') #"
}, {
field: "ScanDocumentRelativePath",
title: "File Path",
template: "<a href='/CAMP/Admin/Download?scanIdnt=#= ScanIdnt #'>#= ScanDocumentRelativePath.substring(1) #</a>"
}, {
field: "ScanUserIdnt",
title: "Scanned By"
},{
command: "destroy",
title: ""
}]
});
Strangely, clicking the delete button removes the from the gird on the UI, but there is absolutely no Ajax call is made the the destroy URL. I can't seem to figure out why. Any ideas?
EDIT I'd like to point out that this grid is in fact a nested grid inside of another grid (like here) I discovered that the parent grid handles actually makes a call, but to the wrong function. For some reason, it clicking delete on a to level item calls the read function of the nested grid, however, the nested grids do nothing
Figured it out (sorta). While I think there were many issues with my code and the grid, It seems that when it came down to it, Kendo didn't like how I had my data.
In the Kendo docs related to hierarchical grids, the data for the child grid is stored in a field of the data for the parent. For example, given the following JSON:
"ParentItems": [
{
"Id": 12345 ,
"Name": "Test1",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
},
{
"Id": 12346 ,
"Name": "Test2",
"ChildItems": [
{"Id": 1, "Name": "Test"},
{"Id": 2, "Name": "Test"}
]
}
]
In the parent grid, each ParentItem would display it's respective ChildItems in the child grid.
On the other hand, I was pulling both data sets separately. Basically, I pulled the ParentItems like:
"ParentItems": [
{
"Id": 12345,
"Name" : "Test1"
},
{
"Id": 12346,
"Name" : "Test2"
}
]
And then made a second request to pull the child items, based on the parent's id.
"ChildItems": [
{"Id": 1, "Name": "Test", "ParentId": "12345"},
{"Id": 2, "Name": "Test", "ParentId": "12345"}
]
I was able to modify the server side code to serve the data like in the very first example and managed to get things working. The specific document that helped me out can be found here
I have a dhtmlx gantt chart in my page, normally it would have work perfectly but now when I have a JSON file with nested array all my output would be unrecognized instead. I'm trying to populate the official name.
Can Anyone help me with this? Thank you very much.
JSON
{
"data": [
{
"assign_to": {
"id": 3,
"employee_id": "28141",
"official_name": "Hal Jordan",
},
"task": {
"id": 1,
"name": "Modeling",
"description": "3d modeling work"
},
"start_date": "2017-06-15",
"end_date": "2017-06-19"
},
{
"assign_to": {
"id": 3,
"employee_id": "28144",
"official_name": "Kyle Rayner",
},
"task": {
"id": 8,
"name": "Composting",
"description": null
},
"start_date": "2017-06-01",
"end_date": "2017-06-08"
}
]
}
Javascript
gantt.config.columns = [
{name: "assign_to.official_name", label: "Assign To", align: "left", width: 70},
];
function initializeGantt() {
gantt.init("my_scheduler");
gantt.load("/dashboard/ganttchart_list/5/?format=json");
}
initializeGantt();
HTML
<div id="my_scheduler" style='width:1405px; height:245px;'></div>
dhtmlx gantt doesn't support nested structure, so you'll need to preprocess your items before loading them to gantt.
Since you know which format you have and which format is expected by gantt (https://docs.dhtmlx.com/gantt/desktop__supported_data_formats.html#json ) it shouldn't be a problem.
The most important thing
Make sure data items have 'id' property
when you define column name like this:
{name: "assign_to.official_name", label: "Assign To", align: "left", width: 70},
column name can't be mapped to a property of a nested object, so you'll either have to flatten structure during loading, very roughly, it can be done in following way:
http://snippet.dhtmlx.com/129d2e043
Or define a column template which would take value from nested object:
http://snippet.dhtmlx.com/9e8e65e85
please check the console output for a result dataset
I'm trying to create a Extjs tree with JSON data. The data I want to load into the tree contains a folder structure. But when I trie to load the data into the tree, it doesn't show anything.
I have checked the json code here (JSONLint) on errors but everythin looks fine. Which would say that the problem probably is in the extjs part.
I have no idea how to get it works.
I have created a JSON-object like this:
{
"folders": [
{
"name": "Function",
"id": "workspace://SpacesStore/000-000-000",
"folders": [
{
"name": "Evaluation reports",
"id": "workspace://SpacesStore/00-00-4949-9caf-6655fg"
},
{
"name": "Function Reports",
"id": "workspace://SpacesStore/554gg-563-sd555-872e-0098hhjf"
},
{
"name": "Training(POP)",
"id": "workspace://SpacesStore/4334g-67hj-4357-ba96-4343fhj343"
}
]
},
{
"name": "Application data",
"id": "workspace://SpacesStore/3434gg-a761-48a2-83fa-3434f454hu",
"folders": [
{
"name": "Application letters",
"id": "workspace://SpacesStore/23232ff-c95f-4999-sdsd556-00886ggh7765"
}
]
}
]
}
This is the Extjs part where I want to load the JSON data:
initComponent: function() {
// declare a new store and load tree data
this.store = new Ext.data.TreeStore({
// set params
proxy: {
type: 'ajax',
reader: 'json',
url: 'http://localhost:8080/testApp/rest/folder/1'
}
});
this.items = [{
flex: 1
}];
this.callParent();
}
You didn't tell the reader what property to read from:
reader: {
type: 'json',
rootProperty: 'folders'
}
I have a ExtJS grid with a store mapped to it.
The JSON response for the store contains 20 fields, but I have mapped only 10 fields in the store. Is it possible for me to obtain the other 10 fields without me having to map them in the store or is it necessary for me to map all the fields to the store. Doing this on row select event of the grid. As for the code, I am able to create the grid, map the store, fire the event and even get the record for the selected row with the mapped 10 field.
Any suggestions ??
As requested by Shekhar :
Store definition
Ext.define('gdoc.store.PrintPaperStore', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'PrintPaperStore',
proxy: {
type: 'ajax',
url: 'urlToRetrieveTheJSON',
reader: {
type: 'json',
root: 'root'
}
},
fields: [{
mapping: 'value',
name: 'value'
},
{
mapping: 'display',
name: 'display'
}
]
}, cfg)]);
}
});
The JSON Response :
{
"root": [{
"value": "COATED115",
"display": "Coated recycled paper (115gms)",
"description": "Good quality",
"extra": "EXTRA INFO"
}, {
"value": "COATED135",
"display": "Coated recycled paper (135gms)",
"description": "Good quality"
}, {
"value": "OFFSET",
"display": "Offset recycled paper (80gms)",
"description": "Good quality",
"extra": "EXTRA INFO"
}, {
"value": "OTHER",
"display": "Other paper (client to order)",
"description": "Good quality",
"extra": "EXTRA INFO"
}]
}
As you can see I have mapped only value and display from the JSON response in the store.
Is it possible for me to retrieve values of description and extra without me having to map them in the store.
You can access the .raw property on the model, which will contain the raw JSON from the reader.
No. The model, or store, must set all the fields you want to have available from the JSON data.
I'm confused as to why you don't want to map the extra fields? It's it purely time saving and hoping there was a quicker way to get access to the data? Or are you expecting the fields names to be dynamic?
If it's the dynamic reason, take a look at this post for a solution. Dynamic model with ExtJS 4