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.

Extjs 4 gridrow draws blank after model save

I have a couple of grids, divided in an accordion layout. They basicly show the same kind of data so an grouped grid should do the trick, however it looks really good this way and so far it works good too.
Left of the grids there is a form panel which is used to edit grid records, when I click on a record in the grid the appropriate data shows up in the form. I can edit the data, but when I click the save button, which triggers an 'model'.save() action, the related grid row draws blank and a dirty flag appears. I checked the model and the 'data' attribute doesn't contain any data but the id, the data is present in the 'modified' attribute.
I read that the red dirty flag means that the data isn't persisted in the back-end, but in this case it is. The request returns with a 200 status code and success : true.
The onSave method from the controller:
onSave : function() {
// Get reference to the form
var stepForm = this.getStepForm();
this.activeRecord.set( stepForm.getForm().getValues() );
this.activeRecord.save();
console.log( this.activeRecord );
}
The step store:
Ext.define( 'Bedrijfsplan.store.Steps', {
extend : 'Ext.data.Store',
require : 'Bedrijfsplan.model.Step',
model : 'Bedrijfsplan.model.Step',
autoSync : true,
proxy : {
type : 'rest',
url : 'steps',
reader : {
type : 'json',
root : 'steps'
},
writer : {
type : 'json',
writeAllFields : false,
root : 'steps'
}
}
} );
Step model:
Ext.define( 'Bedrijfsplan.model.Step', {
extend : 'Ext.data.Model',
fields : [ 'id', 'section_id', 'title', 'information', 'content', 'feedback' ],
proxy : {
type : 'rest',
url : 'steps',
successProperty : 'success'
}
} );
Step grid
Ext.define( 'Bedrijfsplan.view.step.Grid', {
extend : 'Ext.grid.Panel',
alias : 'widget.stepsgrid',
hideHeaders : true,
border : false,
columns : [ {
header : 'Titel',
dataIndex : 'title',
flex : 1
} ]
} );
I spend a couple of hours searching and trying, but I still haven't found the solution. Some help on this matter would be appreciated :)

Your model updating code:
this.activeRecord.set( stepForm.getForm().getValues() );
Should work, but I might try splitting it into two lines and setting a breakpoint to verify that getValues() is returning what you're expecting.
Also ensure that you have the name attribute set for each field in your form and that it matches exactly to the names of fields in your model.
Finally, it's better to call .sync() on the store rather than .save() on the model when you're working with a model that belongs to a store. They option autoSync: true on the store will make this happen automatically each time you make a valid update to one of its models.
The BasicForm.loadRecord and BasicForm.updateRecord methods provide a nice wrapper around the functionality you're seeking that may work better:
onRowSelected: function(activeRecord) {
stepForm.getForm().loadRecord(activeRecord);
}
onSaveClick: function() {
var activeRecord = stepForm.getForm().getRecord();
stepForm.getForm().updateRecord(activeRecord);
activeRecord.store.sync();
}

The only oddity I see is with your: this.activeRecord.set( stepForm.getForm().getValues() );
I've always used .set() on the store never on the record. e.g.:
myDataStore.set( stepForm.getForm().getValues() );

ExtJS 4 - Data in the grid not visible

I have a simple grid with the following code (along with the code of store and model).
var containerDetailsGrid = Ext.create('Ext.grid.Panel', {
store: storeVarContainerDetails,
tbar:[
{
xtype:'tbtext',
text:'Container Details'
}
],
columns: [
{
header : 'Ctr Size',
flex : 1,
dataIndex: 'ctrSize',
autoExpand:true,
align:'center'
}
],
height: 100
});
var storeVarContainerDetails = Ext.create('Ext.data.Store', {
model: 'VoyageMonitoringContainerDetailsModel',
proxy: {
type: 'ajax',
url: 'http://localhost/pnc/stores.php',
extraParams:{
action:'containerDetails'
},
reader: {
type: 'json'
}
},
autoLoad:true
});
Ext.regModel('VoyageMonitoringContainerDetailsModel', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'ctrSize'}
]
});
The store is getting loaded and fetching the data but this data is just not getting displayed or actually is being visible in the grid.
When I inspect the grid element in DOM, then I can see the data to be there in 'td' of grid table, but that data is just not getting displayed.
There are other grids too on the page but all are displaying the data except this one. Also, there is no error being throw in console too.
Could anyone please throw some light at this that why it could be happening? Attached is a screen shot for more clarity.
PS: I am using ExtJS 4.

Posting the solution as an answer here so that it can help someone looking for the same and also I can mark this question as answered. The solution is - a grid should not be made the child of a container in a form, rather should be the child of fieldset in the form. I don't know the reason behind this, but works well for me. Hope this helps someone else too.

Did you try this on your store ?
autoLoad :true

Read JSON string in ExtJS Combobox

I'm trying to read the following string in an ExtJS combobox:
[
{"id":"1","company_name":"company a"},
{"id":"2","company_name":"company b"}
]
EDIT: I think there is some problem with the way my JSON data source is formatting the string because i dont have any root here. Is it important to have a root element?
Here is my Ext JS code:
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://somesite.com/someFile.php'
}),
reader: new Ext.data.JsonReader({},
[
{name: 'id', mapping: 'id'},
{name: 'company_name', mapping: 'company_name'},
]
)
});
var search = new Ext.form.ComboBox({
store : ds,
fieldLabel : 'Query string',
displayField : 'company_name',
typeAhead : true,
loadingText : 'Searching...',
pageSize : 5,
renderTo : Ext.getBody(),
width : 200,
mode: 'remote'
});
});
But unfortunately, i'm unable to get this to work. :( Please help!
I'm a n00b at JavaScript.

Yes, you'll need a root. See the docs for JsonReader, the 'root' config option is required.
Also: if you're not doing some cross-domain fetching of data, you probably shouldn't be using ScriptTagProxy. ScriptTagProxy requires that the server wrap the json-encoded data in a function call. If you're just calling back your same server, use HttpProxy instead.