Loading associations and binding grid to form - json

Question

I've asked a similar question before, here: https://stackoverflow.com/questions/11707007/nested-json-form-submits-in-extjs4-getting-the-writer-to-remap-the-fields
Also asked in the Sencha forums, am pretty desperate:
I have many problems with reading and writing nested json files into an associated model.
I will write all the code that I can here, in the hope that some of you will find what I'm doing wrong.
Questions are emphasized in the text.
The json I am receiving looks like this, and can not be changed: tests:
[
{
"name":"qwerty",
"id":"1",
"uid":"1",
"created":"1341481071",
"changed":"1343804076",
"status":"1",
"jmeterOptions":{
"jmx":"\/files\/20141\/multi.jmx",
"engines":"0",
"version":"2.5.1",
"consoleArgs":" -t sample.jmx -JDelay=10000 -JEmbedded=1 -JRampup=1800 -JUsers=10",
"engineArgs":" -JDelay=10000 -JEmbedded=1 -JRampup=1800 -JUsers=10",
"instanceType":"m1.medium",
"overrideOptions":{
"threads":"50",
"rampUpTime":"300",
"iterations":"-1",
"duration":"-1"
}
},
"testOptions":{
"type":"BM_TEST_TYPE_AUTO",
"geo":"us-east-1",
"timeout":"1",
"reportByEmail":"1",
"launchTime":"0",
"sessionId":"",
"hosts":null,
"privateIps":null
},
"autoOptions":{
"users":"10",
"delay":"10",
"rampUpTime":"1800",
"pages":[
{
"label":"sencha",
"url":"http:\/\/sencha.com"
}
]
},
"seleniumOptions":{
"pages":[
{
"label":"sencha",
"url":"http:\/\/sencha.com"
}
]
}
},
{
"name":"Instant Load test",
"id":"2",
"uid":"1",
"created":"1336921297",
"changed":"1341132949",
"status":"1",
"jmeterOptions":{
"jmx":null,
"engines":"0",
"version":"2.5.1",
"consoleArgs":" -t sample.jmx -JDelay=10000 -JEmbedded=1 -JRampup=1800 -JUsers=10",
"engineArgs":" -JDelay=10000 -JEmbedded=1 -JRampup=1800 -JUsers=10",
"instanceType":"m1.medium",
"overrideOptions":null
},
"testOptions":{
"type":"BM_TEST_TYPE_AUTO",
"geo":null,
"timeout":"1",
"reportByEmail":"0",
"launchTime":"0",
"sessionId":"",
"hosts":null,
"privateIps":null
},
"autoOptions":{
"users":"10",
"delay":"10",
"rampUpTime":"1800",
"pages":[
{
"label":"",
"url":"http:\/\/cnn.com"
}
]
},
"seleniumOptions":{
"pages":[
{
"label":"",
"url":"http:\/\/cnn.com"
}
]
}
}
]
The model looks like this:
Ext.define('BM.model.Test', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'id', type: 'id'},
{name: 'uid', type: 'mumber'},
{name: 'created', type: 'date', dateFormat: 'timestamp'},
{name: 'changed', type: 'date', dateFormat: 'timestamp'},
{name: 'status', type: 'number'},
{name: 'jmeterJmx', mapping: 'jmeterOptions.jmx', type: 'string'},
{name: 'jmeterEngines', mapping: 'jmeterOptions.engines', type: 'number'},
{name: 'jmeterVersion', mapping: 'jmeterOptions.version', type: 'string'},
{name: 'jmeterConsoleArgs', mapping: 'jmeterOptions.consoleArgs', type: 'string'},
{name: 'jmeterEngineArgs', mapping: 'jmeterOptions.engineArgs', type: 'string'},
{name: 'jmeterInstanceType', mapping: 'jmeterOptions.instanceType', type: 'string'},
{name: 'testOptionsType', mapping: 'testOptions.type', type: 'string'},
{name: 'testOptionsGeo', mapping: 'testOptions.geo', type: 'string'},
{name: 'testOptionsTimeout', mapping: 'testOptions.timeout', type: 'number'},
{name: 'testOptionsReportByEmail', mapping: 'testOptions.reportByEmail', type: 'string'},
{name: 'testOptionsLaunchTime', mapping: 'testOptions.launchTime', type: 'string'},
{name: 'testOptionsSessionId', mapping: 'testOptions.sessionId', type: 'string'},
{name: 'testOptionsHosts', mapping: 'testOptions.hosts', type: 'string'},
{name: 'testOptionsPrivateIps', mapping: 'testOptions.privateIps', type: 'string'},
{name: 'autoUsers', mapping: 'autoOptions.users', type: 'number'},
{name: 'autoDelay', mapping: 'autoOptions.delay', type: 'number'},
{name: 'autoRampUpTime', mapping: 'autoOptions.rampUpTime', type: 'number'}
],
hasMany: [
{model: 'Pages', name: 'autoPages', associationKey: 'autoOptions.pages'},
{model: 'Pages', name: 'seleniumPages', associationKey: 'seleniumOptions.pages'}
],
proxy: {
type: 'ajax',
api: {
read: '../webapp/get/tests',
update: '../webapp/set/test'
},
reader: {
type: 'json',
root: 'tests',
successProperty: 'success'
},
writer: new Ext.data.JsonWriter({
encode: false,
writeAllFields: true,
getRecordData: function (record) {
Ext.apply(record.data,record.getAssociatedData(true));
return record.getAssociatedData(true);
}
})
}
});
Ext.define('Pages', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'url', type: 'string'}
]
});
First Question: Including the following four lines causes the grid to load empty, why?
{name: 'jmeterOverrideThreads', mapping: 'jmeterOptions.overrideOptions.threads', type: 'number'},
{name: 'jmeterOverrideRampUpTime', mapping: 'jmeterOptions.overrideOptions.rampUpTime', type: 'number'},
{name: 'jmeterOverrideIterations', mapping: 'jmeterOptions.overrideOptions.iterations', type: 'number'},
{name: 'jmeterOverrideDuration', mapping: 'jmeterOptions.overrideOptions.duration', type: 'number'},
Second Question: The associated data comes up empty. rawData has the json as shown above, how do I make getAssociatedData to fill in the correct data?
Better yet, Why aren't my associations working?
Third Question: The writer now only sends the empty associated data, how do I send all data, exactly as I received it?
My solution to this is dead ugly:
updateTest: function(button) {
var form = button.up('panel');
var record = form.getRecord(),
values = form.getValues();
record.set(values);
var rd = record.data;
// this.getTestsStore().sync(); //No! Sends flattened data.
// var autoPages = record.getAssociatedData().autoPages; // Is currently empty
// var seleniumPages = record.getAssociatedData().seleniumPages; // Is currently empty
var autoPages = [];
var seleniumPages = [];
var iterator = 0;
var autoPagesLabel = record.data['autoPagesLabel' + iterator];
var autoPagesUrl = record.data['autoPagesUrl' + iterator];
while (autoPagesLabel != undefined){
autoPages.push({
'label': autoPagesLabel,
'url': autoPagesUrl
});
iterator++;
autoPagesLabel = record.data['autoPagesLabel' + iterator];
autoPagesUrl = record.data['autoPagesUrl' + iterator];
}
iterator = 0;
var seleniumPagesLabel = record.data['seleniumPagesLabel' + iterator];
var seleniumPagesUrl = record.data['seleniumPagesUrl' + iterator];
while (seleniumPagesLabel != undefined){
seleniumPages.push({
'label': seleniumPagesLabel,
'url': seleniumPagesUrl
});
iterator++;
seleniumPagesLabel = record.data['seleniumPagesLabel' + iterator];
seleniumPagesUrl = record.data['seleniumPagesUrl' + iterator];
}
var reformattedJson = {
"name": rd.name,
"id": rd.id,
"uid": rd.uid,
"created": rd.created,
"changed": rd.changed,
"status": rd.status,
"jmeterOptions":{
"jmx": rd.jmeterJmx,
"engines": rd.jmeterEngines,
"version": rd.jmeterVersion,
"consoleArgs": rd.jmeterConsoleArgs,
"engineArgs": rd.jmeterEngineArgs,
"instanceType": rd.jmeterInstanceType,
"overrideOptions": {
"threads": rd.jmeterOverrideThreads,
"rampUpTime": rd.jmeterOverrideRampUpTime,
"iterations": rd.jmeterOverrideIterations,
"duration": rd.jmeterOverrideDuration
}
},
"testOptions":{
"type": rd.testOptionsType,
"geo": rd.testOptionsGeo,
"timeout": rd.testOptionsTimeout,
"reportByEmail": rd.testOptionsReportByEmail,
"launchTime": rd.testOptionsLaunchTime,
"sessionId": rd.testOptionsSessionId,
"hosts": rd.testOptionsHosts,
"privateIps": rd.testOptionsPrivateIps
},
"autoOptions":{
"users": rd.autoUsers,
"delay": rd.autoDelay,
"rampUpTime": rd.autoRampUpTime,
"pages": autoPages
},
"seleniumOptions":{
"pages":seleniumPages
}
};
Ext.Ajax.request({
url: '../webapp/set/test',
method:'Post',
jsonData: reformattedJson,
success: function(response){
var text = response.responseText;
// process server response here
console.log('Post successfull! ');
}
});
}
This is the form:
Ext.define('BM.view.test.Edit', {
extend: 'Ext.form.Panel',
alias: 'widget.test-edit',
layout: 'anchor',
title: 'Edit Test',
defaultType: 'textfield',
items: [
{name: 'id', hidden: true},
{name: 'name', fieldLabel: 'Name'},
{name: 'status', fieldLabel: 'Status'},
{name: 'testOptionsType', fieldLabel: 'Type'},
{name: 'autoUsers', fieldLabel: 'User count'}
],
buttons: [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
]
});
This is what calls the form: (Clicking on a grid row)
editTest: function(grid, record) {
var view = Ext.widget('test-edit');
var viewPort = Ext.ComponentQuery.query('viewport')[0];
var autoPages = record.raw.autoOptions.pages;
var seleniumPages = record.raw.seleniumOptions.pages;
for (var i =0; i < autoPages.length; i++){
var tf = Ext.create('Ext.form.field.Text', {
id: 'autoPagesLabel' + i,
name: 'autoPagesLabel' + i,
fieldLabel: 'Label',
value: autoPages[i].label,
columnWidth:0.5
});
view.add(tf);
tf = Ext.create('Ext.form.field.Text', {
id: 'autoPagesUrl' + i,
name: 'autoPagesUrl' + i,
fieldLabel: 'Url',
value: autoPages[i].url,
columnWidth:0.5
});
view.add(tf);
}
view.loadRecord(record);
viewPort.layout.centerRegion.removeAll();
viewPort.layout.centerRegion.add(view);
}
I tried following the MVC architecture of Ext JS 4, note by note from the tutorials, and failed miserably.
What am I doing wrong?
Do you need any other information or pieces of code? Just tell me and I'll post them.

Answer 1

I found a solution that works for some of my questions.
As a bypass to my first question, I find that mapping of more than two levels is problematic, so I added a hasOne relationship. I don't think it's a good solution, but have no others, would love a comment about this.
{name: 'jmeterOverrideThreads', mapping: 'jmeterOptions.overrideOptions.threads', type: 'number'},
{name: 'jmeterOverrideRampUpTime', mapping: 'jmeterOptions.overrideOptions.rampUpTime', type: 'number'},
{name: 'jmeterOverrideIterations', mapping: 'jmeterOptions.overrideOptions.iterations', type: 'number'},
{name: 'jmeterOverrideDuration', mapping: 'jmeterOptions.overrideOptions.duration', type: 'number'},
from the model, becomes:
hasOne: [
{model: 'OverrideOptions', associationKey: 'jmeterOptions', reader: {root: 'overrideOptions'}}
],
// and:
Ext.define('OverrideOptions', {
extend: 'Ext.data.Model',
fields: [
{name: 'jmeterOverrideThreads', mapping: 'threads', type: 'number'},
{name: 'jmeterOverrideRampUpTime', mapping: 'rampUpTime', type: 'number'},
{name: 'jmeterOverrideIterations', mapping: 'iterations', type: 'number'},
{name: 'jmeterOverrideDuration', mapping: 'duration', type: 'number'}
]
});
As for my second question about the associations not working:
In my model, instead of:
hasMany: [
{model: 'Pages', name: 'autoPages', associationKey: 'autoOptions.pages'},
{model: 'Pages', name: 'seleniumPages', associationKey: 'seleniumOptions.pages'}
],
I added:
hasMany: [
{model: 'Pages', name: 'autoPages', associationKey: 'autoOptions', reader: {root: 'pages'}},
{model: 'Pages', name: 'seleniumPages', associationKey: 'seleniumOptions', reader: {root: 'pages'}}
],
Suddenly, I am able to access my data from record.getAssociatedData(), it is still flattened, but at least I have the data.
I still don't have a good idea about having the writer output the data in its original format other than writing it as I did in brute force.
Would again love some feedback on that.
Other questions arose:
I want my associated data to be added to a form. As we are talking about arrays of objects, we don't know how many there will be, is there a better way to create the form from associated data than the one I used in my original question. Is there a better way to access the form data, other than naming the fields with a running iterator: a1, a2,...
Thanks in advance for any answer.