Implementing a complex data structure in ExtJS forms

Question

We have a client that requires a fairly complex data model. The value of the data model is not only quite huge (about 500-1000 fields nested in many objects), you also need to send and receive all the data at any time when the field changes all the time (after it loses focus). We get everything as JSON. Here is an example structure:

{ data: { somefield: 'some content' }, label: { somelabel: 'some label text' }, applyable: { somefield: { visible: false } } someSubForm: { data: { somefield: 'some content' }, label: { somelabel: 'some label text' }, anotherSubForm: { data: { somefield: 'some content' }, label: { somelabel: 'some label text' } } } } 

But that is not all; the model also contains tags, tooltips, and other configurations. All data should be displayed on several tabs, where it is possible that the same data is displayed in two different tabs. Due to the necessary layout (defined by the client), the forms will be nested together.

The backend is provided by our client, so I can’t change anything here.

I started by using one model with a specific proxy to load JSON. But after that, I ran into several problems.

Firstly, the form will always track all the fields, even one of the nested forms. Secondly, I cannot change any labels or apply user settings. Thirdly, due to the huge amount of data, the loadRecord () and getValues ​​methods () performed quite a while.

My question is, how can I break this down so that each form only processes its own data, not all the data, and how could I apply user settings?

Answer 1

Here is the solution I'm using now:

First, some facts:

• I will have to cover several R / W operations (in particular, after each field that has changed and lost focus)
• I always get all the data for each request.
• I have to cover a huge amount of data (field data, storage data, tags and configurations).
• I have to optimize this mess to be performance critical.
• There is no way to save anything in a server-side session.
• Forms are nested wildly in each other and can also be split or exist twice

Here is what I am doing now:

I reject all associations and decided to switch with only one model extended from the model with the modified getData method, which supports its own root property, for example someSubForm (see my sample code in the question). Fields are configured as automatic, so changes are required for the reader or writer. It may not be durable, but it works.

The next big problem is forms. The form will always try to set each field, even if it is in a different form. In addition, I need to install quite a few individual labels. So the default form cannot be used, should it be extended? But how and where to start? After a long study of the source, it seems to me that I can’t expand, so I decided to create a completely custom form class, as well as my own mixin class and my own form.basic class. What for? Since I need to form, to look only at the field directly placed in this form, be able to set labels and transfer the model instance to any nested form.

With this, I can now register my own monitor instances with a custom selector. Oh, I forgot the first thing about my new uniform; it is bound to the object using a property that contains the name (for example, someSubForm ).

It is used when

• The item is added to the form.
  • any field gets the form Id
  • any label gets formId (and not labels bound to the form)
  • any form gets parentFormId and instance
• Monitor selectors installed
• The model is a form upload
• Data is retrieved from the model.

Secondly, now there are 3 copies of the monitor

• Collect all the fields using the new selector, which is also looking for Entity. Thus, any subform fields are ignored because they have their own essence.
• All the same for shortcuts
• Collect all forms

The third is a modified loadRecord method that uses the new getData() method of the model and sets specific data to fields, labels, and the entire model in any form.

Overall, I have a performance increase of 800%.

Answer 2

Since you cannot share your JSON, you need a monolithic model for webservice i / o: This is what you already have.

But when the user is working with data, you should focus on the necessary data in order to reduce the time spent on downloading and updating. Therefore, I suggest defining additional models and repositories that return each of your tabs or each form on tabs. Given your sample data, you can, for example, create a form model that is created after loading your large I / O model (either in a callback, or you listen to a load event) by copying the data. You can even delay this expensive copy operation until the user opens the corresponding tab.

I see that there is a subformat, so maybe you can try adding an association to the form model itself.

 Ext.define('YourApp.model.FormModel', { extend: 'Ext.data.Model', fields: [ { name: 'data'}, { name: 'label'} ], associations: [ { type: 'hasMany', model: 'YourApp.model.FormModel', associationKey: 'someSubForm' } ] });