[INFO REQ] Field register

[henrique]

I'm trying to create a custom field. For this I did a test application, just to see how it works, but I can't get the factory to find the record of my field.

What am I doing wrong?

import Grid from '../../lib/Grid/View/Grid.js';
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 DateField from '../../lib/Core/widget/DateField.js';
import Model from '../../lib/Core/data/Model.js';
import Store from '../../lib/Core/data/Store.js';
import DataField from '../../lib/Core/data/Field/DataField.js';
import ModelDataField from '../../lib/Core/data/field/ModelDataField.js';
import ObjectDataField from '../../lib/Core/data/field/ObjectDataField.js';

console.clear();

class MyField extends DataField
{
   static get $name()
   {
      return 'MyField';
   }

   static get type()
   {
      return 'myfield';
   }

   convert(value, record)
   {
      return value;
   }
}

MyField.initClass();

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

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

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

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

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

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

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

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

  myContainer.record = myContainer.record = new Order({Value: 123456});;
   }
});

let myContainer = new Container({
   appendTo: document.body,
   autoUpdateRecord: true,
   items: [orderIdField, buyerNameField, buyerNameComplexMappingField, buyerField, valueField, button]
});

[Maxim Gorkovsky]

Hello. You have wrong import path here. You may notice that if you compare class prototypes, they do not match:

Object.getPrototypeOf(ModelDataField) === DataField // false

And it happens because you're using /Field/ instead of /field/ in DataField import path. On the file system it is lower case and that's how our classes import it. You're trying upper case which resolved but for JS engine it is a different class.

[henrique]

Thank you!!