Develop Reference

ExtJS 6 : load nested data by creating new instance of model

I try to create a model with an hasMany association but when I try to access to the store, it's empty.
This is my models :
BaseModel :
Ext.define( 'Test.model.schema.BaseModel', {
extend: 'Ext.data.Model',
schema: {
namespace: 'Test.model'
}
} );
UserModel :
Ext.define('Test.model.user.UserModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'displayName',
type: 'string'
}
],
hasMany: [
{
name: 'roles',
model: 'user.RoleModel', // also try with Test.model.user.RoleModel
associationKey: 'roles'
}
]
});
RoleModel :
Ext.define('Test.model.user.RoleModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'label',
type: 'string'
}
]
});
This is my Application :
Ext.application({
name: 'Test',
models : [
'Test.model.schema.BaseModel',
'Test.model.user.RoleModel',
'Test.model.user.UserModel'
],
appFolder : contextPath + '/' + staticsPath + '/js/app',
controllers : ['router.TestRouterController'],
defaultToken : 'auth'
});
In my controller I try to create my user model like this :
var user = Ext.create('Test.model.user.UserModel', {
displayName : 'Mick P.',
roles : [
{
label: 'test'
}
]
});
Same with JSon.
When I do user.roles().getAt(0) I got null and user.roles().data.items is empty.
Do you see what i'm doing wrong ?
EDIT 1 : A fiddle of my problem : https://fiddle.sencha.com/#fiddle/1e54
EDIT 2 : It works if I load my datas with a memory store. But why not by loading directly a model.

Sencha support send to me a response. Perhaps some of you need an answer.
First you need to read this documentation page : http://docs.sencha.com/extjs/6.0.2-classic/Ext.data.reader.Reader.html
When you pass data directly into the Model constructor, it is not passed through the configured reader, and only basic fields are evaluated.
Data does need to pass through a Reader.
If you don't want to create a Store :
1 - you need to declare proxy into models
2 - to create model with nested data, you have to do something like that :
UserModel.getProxy().getReader().read(raw);
If you need a fiddle example tell me.
- Mickael

what is "root:'data' " extjs store config

I am very new to ExtJs and I have the following code for a treeView,,which has a default root in the beginning and then an Ajax call to a servlet .But i don't understand the 'root' field with value 'data' .Is data an alias or xType .Here is the code:
Ext.define('Eits.view.OrgTreeView', {
extend : 'Ext.tree.TreePanel',
requires: ['Eits.model.OrgTreeModel'],
width : '100%',
region : 'center',
border : true,
store : {
xtype : 'tree',
fields : Eits.model.OrgTreeModel.FIELDS,
//model: 'Eits.model.OrgTreeModel',
autoLoad: false,
root: {
id: 'rootNode',
objectId : 'rootNode',
leaf: false,
expanded: false,
text : 'MTS',
iconCls : 'mts-Tree-Node',
},
proxy: {
type: 'ajax',
url: 'orgTree/getNavigationTree.action',
actionMethods: 'POST',
reader: {
type: 'json',
root: 'data'
}
}
}

root property is:
The name of the property which contains the data items corresponding
to the Model(s) for which this Reader is configured. For JSON reader
it's a property name (or a dot-separated list of property names if the
root is nested). For XML reader it's a CSS selector. For Array reader
the root is not applicable since the data is assumed to be a
single-level array of arrays.
By default the natural root of the data will be used: the root JSON
array, the root XML element, or the array.
The data packet value for this property should be an empty array to
clear the data or show no data.
(Extjs's documentation is a great resource when using the framework)

KendoUI ComboBox displaying incorrect parsing of REST JSON

I have a restful service responding with {"SearchMode":["Customer","Address","Street","City"]}, everything looks fine. I'm trying to add each of these as an option in a Kendo ComboBox. However, it's parsing it out and showing each letter as an option:
{
"
S
e
a
r
c
h
you get the point. Here is what I'm doing in the javascript to get this. I'm learning Kendo controls so any help is appreciated.
$(#cboSearch").kendoComboBox({autobind:false, minLength:3, datasource:{type:json, serverFiltering: true, transport:{ read: { url: "http://myrestservicehere?f="}}} });
I know I'm missing something obvious and looking forward for some guidance, thanks.
Scott

You are missing in the DataSource definition saying where in the returned object is the array containing the options. This is done using schema.data. It should be:
$("#cboSearch").kendoComboBox({
autoBind : false,
minLength : 3,
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport : {
read: {
url: "http://myrestservicehere?f="
}
},
schema : {
data: "SearchMode"
}
})
});

The ComboBox doesn't support binding to array of strings. You could try changing your JSON to something like:
{
"SearchMode": [
{"text":"Customer"},
{"text":"Address"},
{"text":"Street"},
{"text":"City"}
]
}
Then configure the combobox like this:
$("#cboSearch").kendoComboBox({
autoBind : false,
minLength : 3,
dataTextField : "text",
dataValueField : "text",
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport : {
read: {
url: "http://myrestservicehere?f="
}
},
schema : {
data: "SearchMode"
}
})
});

List not populating with a JsonP proxy

I want to have a Navigation view. I am trying to populate the list in Sencha Touch using a JsonP proxy.
Here's the sample code snippet of what I have tried till now :
var view = Ext.define('MyApp.view.NavigateView', {
extend: 'Ext.navigation.View',
xtype:'navigateview',
config : {
fullscreen:true,
styleHtmlContent:true,
scrollable:true,
items : [
{
title:'Navigation',
items : [
{
xtype:'list',
store: {
fields : ['title','author'],
proxy : {
type:'jsonp',
url:'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
},
autoLoad:true,
},
itemTpl:'<div class="contact">{title} <strong>{author}</strong></div>',
listeners : {
itemtap : function(){
Ext.Msg.alert('Called');
}
}
}
],
}
]
}
});
But the problem is, my list is not getting populated. No items are being shown up in the list.
Also, I am constantly getting this error on console.
XMLHttpRequest cannot load
http://api.tinyhippos.com/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=list.php%3F_dc%3D1334462633038%26page%3D1%26start%3D0%26limit%3D25.
Origin http://localhost is not allowed by Access-Control-Allow-Origin.
Anyone please guide ? Anything that I am missing here ?

i was facing the same error when using AJAX request in cross domain.
have a look here
you have to make sure that the server part is configured properly using jsonp
as a first step identify if your application will run correctly when you disable web security in your browser
locate your chrome installation directory
then type in your cmd: chrome --disable-web-security

Your Ext.navigation.View object is containing one Ext.Component object (xtype not defined so defaulted to 'component') that is containing your list. If you put your list directly as an item of your view, it'll be rendered:
var view = Ext.define('MyApp.view.NavigateView', {
extend: 'Ext.navigation.View',
xtype: 'navigateview',
config : {
fullscreen: true,
styleHtmlContent: true,
scrollable: true,
items : [{
title: 'Navigation',
xtype: 'list',
store: {
fields: ['title','author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
},
autoLoad:true
},
itemTpl: '<div class="contact">{title} <strong>{author}</strong></div>'
}]
}
});
Note1: Not sure why your code is not working.
Note2: The error your mentioned is not related to your code snippet

Ext JsonStore doing a POST even if I set it to GET

I have a jsonstore that is supposed to load a user's information. I have its HTTPRequest as a GET but when I finally do load up the store with parameters, it automatically changes to a POST request.
I've done something similar to this before, except it was a regular datastore, and the request stayed as a GET. Is the default behavior of a jsonstore when supplied with params to do a POST request?
var userDisplayStore = new Ext.data.JsonStore({
url : myurl/userinfo,
method : 'GET',
fields : ['firstName', 'lastName', 'email', 'userName'],
id : 'user-display-store',
root : 'data'
});
userGridPanel.on('rowclick', function(grid, dataIndex, event) {
var dataRow = grid.getStore().getAt(dataIndex);
userDisplayStore.load({
params : {username : dataRow.data.username}
});
});

Try using a proxy with your store... and the method gets set as part of the proxy.
I think it would be something like this:
var userDisplayStore = new Ext.data.JsonStore({
fields : ['firstName', 'lastName', 'email', 'userName'],
id : 'user-display-store',
root : 'data',
proxy : new Ext.data.HttpProxy({
method: 'GET',
url: 'myurl/userinfo'
})
});

Another way,
var userDisplayStore = new Ext.data.JsonStore({
url : myurl/userinfo,
fields : ['firstName', 'lastName', 'email', 'userName'],
id : 'user-display-store',
root : 'data'
});
userDisplayStore.proxy.conn.method = 'GET';