Databases
StackOverflow2013
Postsdbo
POLoading associations and binding grid to form
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLoading associations and binding grid to form
    primarykey
    data
    text
    <p>I've asked a similar question before, here: <a href="https://stackoverflow.com/questions/11707007/nested-json-form-submits-in-extjs4-getting-the-writer-to-remap-the-fields">https://stackoverflow.com/questions/11707007/nested-json-form-submits-in-extjs4-getting-the-writer-to-remap-the-fields</a></p> <p>Also asked in the Sencha forums, am pretty desperate:</p> <p>I have many problems with reading and writing nested json files into an associated model.</p> <p>I will write all the code that I can here, in the hope that some of you will find what I'm doing wrong.</p> <p>Questions are emphasized in the text.</p> <p>The json I am receiving looks like this, and can not be changed: tests:</p> <pre><code>[ { "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" } ] } } ] </code></pre> <p>The model looks like this:</p> <pre><code> 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'} ] }); </code></pre> <p><strong>First Question:</strong> Including the following four lines causes the grid to load empty, why?</p> <pre><code>{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'}, </code></pre> <p><strong>Second Question:</strong> 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?</p> <p><strong>Third Question:</strong> The writer now only sends the empty associated data, how do I send all data, exactly as I received it?</p> <p>My solution to this is dead ugly:</p> <pre><code> 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! '); } }); } </code></pre> <p>This is the form:</p> <pre><code>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 } ] }); </code></pre> <p>This is what calls the form: (Clicking on a grid row)</p> <pre><code>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 &lt; 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); } </code></pre> <p>I tried following the MVC architecture of Ext JS 4, note by note from the tutorials, and failed miserably.</p> <p>What am I doing wrong?</p> <p>Do you need any other information or pieces of code? Just tell me and I'll post them.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USbldoron
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POLoading associations and binding grid to form
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIf you put it in jsfiddle I will fix it for you
      singulars
      1. POLoading associations and binding grid to form
      1. USNeil McGuigan
    2. COThere are many files in the web app, I really tried to follow the MVC architecture. How will jsfiddle accept so many files? I don't have files stored online yet, we are obviously not live with the web app. Is there another way? Shall I put them all as one big java file in jsfiddle? Thanks for the offer to help, in any case.
      singulars
      1. POLoading associations and binding grid to form
      1. USbldoron
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload