[INFO REQ] Merging fields

[henrique]

I've added my example, I'm adding a field in the Store, but it doesn't load the field. According to the documentation it would merge the fields, but apparently it is not happening.

// import Button from '../../lib/Core/widget/Button.js';
// import TextField from '../../lib/Core/widget/TextField.js';
// import Container from '../../lib/Core/widget/Container.js';
// import Model from '../../lib/Core/data/Model.js';
// import Store from '../../lib/Core/data/Store.js';
// import ModelDataField from '../../lib/Core/data/field/ModelDataField.js';
// import ObjectDataField from '../../lib/Core/data/field/ObjectDataField.js';

console.clear();

ModelDataField.prototype.isEqual = function(first, second) {
    return (first && second) && (second instanceof first.constructor) && second.id == first.id;
};

ObjectDataField.prototype.isEqual = function(first, second) {
    return (first && second) && (second instanceof first.constructor) && second == first;
};

class Person extends Model 
{
    static get fields() 
    {
       return [{ name: "id", type: "string"},
               { name: "Order", type: "object" },
               { name: "Name", type: "string" }];
    }
}

class Order extends Model 
{
   static get fields() {
      return [
         { name: "id", type: "string"},
         { name: "Buyer", type: "object" },
      ];
   }
}

let rawPerson = {Name: "Um nome", id: "a"};

let rawPerson2 = {Name: "Outra pessoa", id: "b"};

let rawOrder = {id: "abc"};

// rawPerson.Order = rawOrder;
// rawPerson2.Order = rawOrder;
// rawOrder.Buyer = rawPerson;

let person = new Person(rawPerson);

let person2 = new Person(rawPerson2);

// rawPerson.Order = rawOrder;
// rawPerson2.Order = rawOrder;
// rawOrder.Buyer = person;

let order = new Order(rawOrder);

person.Order = order;
person2.Order = order;
order.Buyer = person;

console.log("rawPerson", rawPerson);
console.log("rawOrder", rawOrder);
console.log("person", person);
console.log("order", order);

let store = new Store({
   data: [order],
   fields: [{ name: "BuyerName", type: "string", dataSource: "Buyer.Name" }],
   modelClass: Order
});

let orderIdField = new TextField({
   width: 200,
   label: "Order Id",
   icon: "b-fa b-fa-plug",
   style: "margin-right: .5em",
   name: "id"
});

let personNameField = new TextField({
   width: 200,
   label: "Customer name",
   icon: "b-fa b-fa-plug",
   style: "margin-right: .5em",
   name: "BuyerName"
});

let personNameField2 = new TextField({
   width: 200,
   label: "Customer name complex",
   icon: "b-fa b-fa-plug",
   style: "margin-right: .5em",
   name: "Buyer.Name"
});

let button = new Button({
   text: "Button",
   onClick: function () {
      store.first.Buyer = person2;

  myContainer.record = store.first;
   }
});

let myContainer = new Container({
   appendTo: document.body,
   items: [orderIdField, personNameField, personNameField2, button]
});

myContainer.record = store.first;

[Maxim Gorkovsky]

Hello.
Documentation is not very explicit on that matter. It is supposed to say either fields or modelClass. I recommend to move all fields definition to a model class. What is the point of having both modelClass and fields?

[henrique]

In the system I'm developing now, the model comes from the API, only with the value fields. And as in the example, I need to take the field value from another internal model, to present to my user. As in the documentation says that the fields will be merged, would solve my problem, that then I can do whatever I want in the presentation.

But then the documentation is incorrect, does it not do this merge of fields?

Is there any solution to solve this?

[Maxim Gorkovsky]

Instead of defining custom fields on the store you can extend model with the same set of fields and provide it as a model class.

class MyModel extends Model { ... }

const tmpCls = class extends MyModel { ... }
store = new Store({
  modelClass : tmpCls
})

[henrique]

This will not work for me, because I have many registration pages, if you need to access each one, to make this adjustment, it will take too long and I will still have to remember to warn my colleagues, to do this on each screen.

It would be interesting for Store to do what his documentation suggests he does.

[alex.l]

I've opened a ticket to fix that https://github.com/bryntum/support/issues/3883

[johan.isaksson]

Hi,

There seems to be a misunderstanding here. It is possible to define fields on both a Model and Store and they will merge. For example like this:

class MyModel extends Model {
  static fields = ['name'];
}

const store = new Store({
  modelClass : MyModel,
  fields : ['city'],
  data : [{ name : 'Donald', city : 'Duckburg' }]
});

Behind the scenes the store will create a subclass of MyModel (MyModelEx), adding the fields defined on the store. The problem is that you supply an instance (record) and not data, and modelClass is only used for data. Instances are kept as they are. We will clarify this in docs.

[henrique]

With a complex type, like my sample, how does this work?

[alex.l]

It will work same with any field types.

[henrique]

As I showed in my example, it's not working.