How to load a nested model into an Extjs form using loadRecord

Question

I created a script to dynamically create the form, but I had a problem loading the data of the nested model. I tried to download the whole record, and I tried to download each additional store, but it does not work.

I have the option of using form.load (), but from my understanding, which requires a proxy connection, and also for storing json data inside a data array.

Does anyone have any suggestions on how I can approach this issue?

<div id=" view-@pageSpecificVar " class="grid-container even"></div> <div id="button"></div> <script> Ext.define('HeaderForm', { extend: 'Ext.form.Panel', initComponent: function () { var me = this; Ext.applyIf(me, { id: Ext.id(), defaultType: 'textfield' }); me.callParent(arguments); } }); // Define our data model Ext.define('HeaderModel', { extend: 'Ext.data.Model', fields: [ { name: 'HeaderSequence', type: 'int'} ], hasMany:[ { name: 'Columns', model: 'ColumnModel' } ], proxy: { type: 'ajax', actionMethods: { create: 'POST', read: 'GET', update: 'POST', destroy: 'POST' }, url: '@Url.Content("~/Test/Header")', timeout: 1200000, }, }); Ext.define('ColumnModel', { extend: 'Ext.data.Model', fields: [ { name: 'ColumnWidth', type: 'float'} ], hasMany:[ { name: 'Fields', model: 'FieldModel'} ], belongsTo: 'HeaderModel' }); Ext.define('FieldModel', { extend: 'Ext.data.Model', fields: [ { name: 'XType', type: 'string'}, { name: 'FieldLabel', type: 'string'}, { name: 'Name', type: 'string'}, { name: 'Data', type: 'string'}, { name: 'FieldSpecify', type: 'bool'} ], belongsTo: 'ColumnModel' }); var store = Ext.create('Ext.data.Store', { storeId: 'HeaderStore', model: 'HeaderModel', autoDestroy: true, listeners: { load: function (result, records, successful, eOpts) { //console.log(result); var form = dynamicForm(records[0]); form.add(submitButton); form.render(' view-@pageSpecificVar '); } } }); store.load(); var dynamicForm = function(record) { var form = new HeaderForm(); var columnContainer = new Ext.widget({ xtype: 'container', layout: 'column' }); var formItems = new Ext.util.MixedCollection(); Ext.each(record.ColumnsStore.data.items, function(item) { Ext.iterate(item.data, function (key, value) { var fieldContainer = new Ext.widget({ xtype: 'container', columnWidth: value }); Ext.each(item.FieldsStore.data.items, function(item) { if(item.data["FieldSpecify"]) { fieldContainer.add(new Ext.widget({ xtype: item.data["XType"], fieldLabel: item.data["FieldLabel"], name: item.data["Name"], //value: item.data["Name"] })); } }, this); columnContainer.add(fieldContainer); }, this); }, this); formItems.add(columnContainer); form.add(formItems.items); Ext.each(record.ColumnsStore.data.items, function(item) { Ext.each(item.FieldsStore.data.items, function(fields) { form.loadRecord(fields); }); }); //form.loadRecord(record); return form; }; var submitButton = new Ext.widget({ xtype: 'toolbar', dock: 'bottom', items:[{ xtype: 'button', text: 'Save', handler: function(button) { var basic = button.up('form').form; basic.updateRecord(basic.getRecord()); var store = Ext.StoreMgr.get('HeaderStore'); store.each(function(record) { record.dirty = true; }); store.sync(); } }] }); </script> 

Update Sorry, I probably didn’t make it very clear. I had a problem loading the repository data into the form fields. For static forms, I usually use loadRecord to load the nested model into the form, but in this case all the fields are nested in their own small model, so is there a way to load each nested model value into my field using loadRecord?

HeaderModel stores information about a set of fields.

The purpose of ColumnModel is to create a container that will surround a set of fields for styling purposes. It just creates two columns of fields.

FieldModel stores field-specific attributes and data.

Here is an example of json data answers ...

 { "HeaderSequence":1, "Columns":[{ "ColumnWidth":0.5,"Fields":[ {"XType":"textfield","FieldLabel":"FieldA","Name":"NameA","Data":"A","FieldSpecify":true}, {"XType":"textfield","FieldLabel":"FieldB","Name":"NameA","Data":"B","FieldSpecify":true}] },{ "ColumnWidth":0.5,"Fields":[ {"XType":"textfield","FieldLabel":"FieldA2","Name":"NameA2","Data":"A2","FieldSpecify":true}, {"XType":"textfield","FieldLabel":"FieldB2","Name":"NameB2","Data":"B2","FieldSpecify":true}] } ] 

}

thanks

Answer 1

I will figure out how to load a nested model into a form. We cannot just use load or loadRecord, because by default this method tries to get the model data and iterate through the data object and call setValues.

What I need to do is manually get the basic form element and call setValues ​​myself to assign values.

  // loop through each field store to load the data into the form by field id Ext.each(record.ColumnsStore.data.items, function(item) { Ext.each(item.FieldsStore.data.items, function(fields) { form.getForm().setValues([{ id: fields.data['Id'], value: fields.data['DisplayName'] }]); }); }); 

To keep track of this, you must also create a custom handler. Which goes through the repository and sets the saved value to save before repository synchronization.

 // define form submit button var submitButton = new Ext.widget({ xtype: 'toolbar', dock: 'bottom', items:[{ xtype: 'button', text: 'Save', handler: function(button) { // get basic form for button var basic = button.up('form').form; // get form submit values var formSubmitValues = basic.getValues(); // get header store var store = Ext.StoreMgr.get('HeaderStore'); // loop through each field store and update the data values by id from the form store.each(function(record) { Ext.each(record.ColumnsStore.data.items, function(item) { Ext.each(item.FieldsStore.data.items, function(fields) { fields.data['Data'] = formSubmitValues[fields.data['Id']]; }); }); // mark the record as dirty to be sync record.dirty = true; }); // sync store object with the database store.sync(); } }] }); 

Answer 2

Take a look at this and this example on how to load nested data into a nested model. You will also see how to access related data.

I'm not sure why you are using record.ColumnsStore.data.items , as if the record is of type HeaderModel , you really have to store the columns through record.Columns , and then iterate this storage.

It will also help you find out what your server returns JSON.