[INFO REQ] Visual field update

[henrique]

I'm trying to understand how updating fields when they're inside a container works.

Below I put my test code, but the fields are not updated, no matter how I do the assignment within the click of the button.

What am I doing wrong?

class Person extends Model 
{
   static get fields() 
   {
      return [{ name: "Name" }];
   }
}

class Order extends Model {
   static get fields() {
      return [
         { name: "OrderId", type: "int" },
         { name: "Buyer", type: "object" },
         { name: "BuyerName", type: "string", dataSource: "Buyer.Name"}
      ];
   }
}

let person = new Person({ Name: "A Person" });

let newPerson = new Person({ Name: "Another Person" });

let order = new Order({ OrderId: 123, Buyer: person });

let store = new Store({
   data: [order],
   modelClass: Order
});

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

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

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

  console.log(store.first);
  console.log(order);
   }
});

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

myContainer.record = store.first;

[Animal]

Container does not listen for its record's Store's change event.

Maybe it should. Worth a Feature Request...

[Animal]

https://github.com/bryntum/support/issues/3804

[henrique]

Any suggestions for a workaround?

[Animal]

Subclass Container.

Add an option to its configurable called store.

The updateStore(store, oldStore) implementation should then add a change listener to the incoming Store (and remove the listener from any outgoing old store)

In its updateRecord(record, oldRecord) implementation, set the store of the container to the incoming record's store (After the super call).

The change listener in your Container subclass:

// When our record's Store triggers a change event, then if it's on our record
// update our child item values.
onStoreChange({ record })
    if (record === this.record) {
        this.setValues(this.record);
    }
}

Just a suggestion, YMMV, happy hacking!

[Animal]

Due to our config system, resetting the Container's record to what it already is won't have any effect.

A configurable config, checks the incoming value against the current value, and if they are the same, no further action is taken.

setValues(record) is the way to update child items' values.

[Animal]

In fact we discovered that setting the record does work. The Container class specially bypasses the config system's "no change" checking so that if a record gets mutated it can be sent in again, and the child items will get updated.