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

extjs ServerProxy error on save

I'm trying to update a field value from a grid row icon. But I get this error:
Uncaught Ext.data.proxy.Server.buildUrl(): You are using a ServerProxy but have not supplied it with a url.
I'm using a RestProxy, this is the store definition:
Ext.define('SF.store.Contents', {
requires: [
'SF.Config',
'SF.store.RestProxy'
],
extend: 'Ext.data.Store',
model: 'SF.model.Content',
autoLoad: false,
proxy: Ext.create('SF.store.RestProxy', {
url: (new SF.Config()).getApiBaseUrl() + "admin/contents"
}),
});
column code on GridPanel definition
....
store: 'Contents',
.....
{ xtype: 'actioncolumn', header: 'Action'
, width: 40
, items: [{ // Delete button
icon: '......./cancel.png'
, handler: function(grid, rowIndex, colindex) {
var record = grid.getStore().getAt(rowIndex);
record.set('status',6);
record.save(); //THIS CALL THROWS THE ERROR
grid.store.remove(record);
}
},......
In addition, the proxy is working fine for GET request. Does anyone knows what should I define on the proxy?
I've read the official doc but it is not clear for me.

You have to provide a proxy for you model. In the button´s handler you are calling the model's save method (SF.model.Content) then, your SF.model.Content model has to provide a proxy.

issue with pagingtoolbar on a livesearchgridpanel

i'm trying to set a pagingtoolbar on my livesearchgridpanel.i'm getting the data over a Httpproxy ,so here is my store :
tempStore = new Ext.data.Store
({
groupField : default_groupby_s,
model : 'reportWorkspace',
allowFunctions : true,
autoSync : false,
pageSize : 20,
autoLoad : true,
remoteSort : false,
proxy : new Ext.data.HttpProxy
({
url : url_s,
actionMethods :
{
read : 'POST'
},
reader :
{
type : 'json',
root : 'workspace_report',
successProperty : 'success'
}
})
});
return tempStore ;
}
and here is my pagingtoolbar ,it will be included in my LivesearchgridPanel:
{
xtype: 'pagingtoolbar',
store: tempStore ,
dock: 'bottom',
pageSize:20,
displayInfo: true
}
the problem,it's that the pagingtoolbar is displaying pages correctly,but in the case of my grid,it displays ALL the data at the same time (in every page) . is it possible to do it without setting any starting point or limit in the autoload param ??
i just want to download all my data and then display it Correctly with pages
Any suggestion Please ?

I see several incosistencies:
LiveGrid was not built for paging at all but as an alternative to it.
ExtJS 4.1x no longer uses HTTP Proxy class but instead uses type: 'ajax' proxy config.
If you are going to page your data, you need to remote sort it, otherwise it won't make sense.
You have to make sure your grid panel and your pagingtoolbar refer to the same store instance. A common config for that in a grid panel is:
.
this.dockedItems = [
{
xtype:'pagingtoolbar',
store:this.store, // same store GridPanel is using
dock:'bottom',
displayInfo:true
}
];

Sencha Touch - Error - JSON Recovery

I contact you because I'm in a deadlock.
I try to get data from a extern web service with "ScriptTag" but it does not work because the web service returns simple json format (No JSONP).
Do you know if there is a another way to retrieve json using sencha ?
var helloWorld = new Ext.Application({
Parking: Ext.regModel('Parking', {
fields:[
{name:'parkingName'},
{name:'latitude'},
{name:'longitude'},
{name:'mapUrl'}
],
}),
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
dockedItems: [{xtype:'toolbar', title:'JSON Recovery'}],
tabBar: {
ui: 'light',
layout: {
pack: 'center'
}
},
items: [
{cls:'Page1', title:'Page1', html:'Page1'},
{
cls: 'list',
title: 'Page2',
xtype: 'list',
loadingText: 'Chargement',
itemTpl:'<div>{parkingName}</div>',
store: new Ext.data.Store({
autoLoad:true,
model: 'Parking',
proxy: {
type: 'scripttag',
url : 'http://walker.hotcity.lu/hotcity-central-server/webresources/parking/json?format-version=1_0&client-type=iPhone',
reader: {
type: 'json',
root: 'remoteObject'
},
}
}),
},
],
});
}
});
warning : Resource interpreted as Script but transferred with MIME type application/json.
error : Uncaught SyntaxError: Unexpected token :
Thank You.
Kevin.

What you are looking for is the Ajax Proxy. There are some examples in the docs about how to use it, and how to configure it. The default reader is JSON so as long as your model matches up with the information retrieved via JSON then you will be alright.
The other thing you should be aware of is that, JSONP can get around cross site scripting, but if you are not deploying to the walker.hotcity.lu domain, then the browser will not allow the request due to the same origin policy. The server will have to respond with the proper CORS headers to allow your app to access the data.

Get records from json store extjs

I have a json store loaded, I need to grab one record from it.
I used : getAt(index), find(), getById(), but no results .
This is my code :
var appSettingReader = new Ext.data.JsonReader({
root: 'results',
},[
{name: 'id', type: 'int', mapping: 'id'},
{name: 'projetId', type: 'int', mapping: 'projetId'},
{name: 'resLevels', type: 'int', mapping: 'resLevels'},
{name: 'maxResToLock', type: 'int', mapping: 'maxResToLock'},
{name: 'maxTimeToLock', type: 'int', mapping: 'maxTimeToLock'},
{name: 'infosToPrint', type: 'string', mapping: 'infosToPrint'}
])
var appSettingStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'inc/getSettings.php',
method: 'POST'
}),
baseParams:{task: "app"},
reader : appSettingReader,
sortInfo:{field: 'id', direction: "DESC"}
})
appSettingStore.load();
This code return undefined :
console.log(appSettingStore.getAt(0));
console.log(appSettingStore.find("id","1"));
This is the json string returned from server :
{success:true,"results":[{"id":"1","projetId":"1","resLevels":"1","maxResToLock":"40","maxTimeToLock":"10","infosToPrint":"1_2_3_5","hotlineMail":"admin#app.com"}]}
I've also tested this code :
var records = new Array()
var test = appSettingStore.each(function(rec){
records.push(rec)
})
console.log(records)
and I get an empty array !
PS : This store is not bound to any component;
I just want to read and write to it.

You need to place a callback on the store, that will be fired after it loads. You can then use the data as required.
store.load({
callback : function(r, options, success) {
console.log(r.data)
}
})

It appears the server is returning invalid JSON. Why does your server-side script's output start with "("?
If that's not actually the problem, maybe you should consider accepting some more answers to your questions. People will be more likely to help.
EDIT: Okay, so you're pretty sure you're getting valid json back from the server. Try adding a 'success' property to your server's output.
If that doesn't work, you'll want to dig in a little more. Try adding a callback option to your store's .load(), and look at the stuff that gets passed into the callback. That should help you figure out where things are going wrong.