Why does Ext.form.Field.setValue () not fire an event? How to fix it?

Question

Why doesn't Ext.form.Field setValue fire an event to notify listeners whose value has changed? I know that there is a change and select event for combobox, but these are only fire events when interacting with the user, but what when another component changes the value of the field? Let me explain the situation that I am facing.

I am currently working on a reusable fieldset component (called its ux.fieldset) using combobox and another set of fields inside. The internal set of fields should be hidden / shown based on the selected value of the drop-down list. I registered a listener in a combobox that listens for the select event, and when it fires, it simply evaluates the selected value and shows / hides the internal set of fields.

Then I add this ux.fieldset as a component to one of my forms.

Now, when I do loadRecord () on the form, I would like to override the value of the internal combobox so that I can show / hide the internal field set of my component. The code that makes this assessment should obviously be in the ux.fieldset field, since it contains a combo box, and since it is reusable, it would be wise to put it (DRY).

Is there a preferred or best way to handle this scenario? I pasted my ux code below if someone is confused by my explanation above.

 Ext.ux.form.StatusFieldSet = Ext.extend(Ext.form.FieldSet, { enablePublishFrom : false // Wether or not the option to (un)publish on a certain date should be visible, defaults to false ,item_store : false ,combo : false ,date_publish : false ,date_unpublish : false ,helpBox : { xtype : 'box' ,autoEl : {cn: 'Help text<br />'} } ,publishData_fieldset : false ,datePickerWidth : 60 // The width of the datepickers in the subfieldset ,initComponent : function(){ this.item_store = [['online', _('Gepubliceerd')]]; // Online if(this.enablePublishFrom) {this.item_store.push(['pending', _('Publiceer op datum')]);} // Publish on date this.item_store.push(['offline', _('Niet gepubliceerd')]); // Offline this.combo = new Ext.form.ComboBox({ name : 'status' ,hideLabel : true ,displayField : 'txt' ,valueField : 'quicklink' ,hiddenName : 'status' ,value : 'online' ,forceSelection : true ,allowBlank : false ,editable : false ,triggerAction : 'all' ,mode : 'local' ,store : new Ext.data.SimpleStore({ fields : [ 'quicklink', 'txt' ] ,data : this.item_store }) ,listeners : { scope : this ,select : function(combo, value, index) { // HERE I would like to add another listener that gets triggered when another value is selected or set through setValue() this.showOnPending(value.data.quicklink); } } }); this.date_publish = new Ext.form.DateField({ fieldLabel : _('Publiceer op') ,name : 'publish_date' ,format : 'dmY' ,width : this.datePickerWidth }); this.date_unpublish = new Ext.form.DateField({ fieldLabel : _('De-publiceer op') ,name : 'unpublish_date' ,format : 'dmY' ,width : this.datePickerWidth }); this.publishData_fieldset = new Ext.form.FieldSet({ autoHeight : true ,hidden : true ,anchor : '0' ,defaults : { labelSeparator : '' ,anchor : '0' } ,items : [ this.helpBox, this.date_publish, this.date_unpublish ] }); // Config with private config options, not overridable var config = { items : [ this.combo, this.publishData_fieldset ] ,title : _('Status') ,autoHeight : true }; Ext.apply(this, Ext.apply(this.initialConfig, config)); Ext.ux.form.StatusFieldSet.superclass.initComponent.call(this, arguments); } ,showOnPending: function(v) { if(v == 'pending'){ this.publishData_fieldset.show(); } else { this.publishData_fieldset.hide(); } } }); Ext.reg('statusfieldset', Ext.ux.form.StatusFieldSet); 

---

UPDATE:

I managed to handle it by overloading the setValue method of the combobox instance. But this is by no means an elegant and good solution if you ask me.

 this.combo.setValue = function(v){ this.showOnPending(v); return Ext.form.ComboBox.superclass.setValue.apply(this.combo, arguments); }.createDelegate(this); 

I would like some input from ExtJS veterans on how they will handle this.

Answer 1

Yep, setValue does not setValue any events. I can only guess why. I can tell you that you click on any functionality that Combo adds to setValue with your work.

Something like this would be safer.

 this.combo.setValue = this.combo.setValue.createSequence(this.showOnPending, this); 

There is also code that will "fix" setValue so that it setValue event. I will try to find him. Adds a second parameter to setValue. You can override Combo.prototype.setValue using Ext.override with it: http://code.extjs.com:8080/ext/ticket/185 .

In the end, I think creating a sequence is still your safest bet.

Answer 2

Adding a change event to the combobox setValue method is quite simple using the override class:

 Ext.define('<app_name>.override.form.field.ComboBox', { override: 'Ext.form.field.ComboBox', setValue(newValue) { let oldValue = this.getValue(); this.callParent(arguments); this.fireEvent('change', this, newValue, oldValue) } } 

You just need to make sure that the file containing this code is downloaded by the application. I still use Ext 5, so I add it to the required array of the Application.js project file, but I believe that Ext 6 has an overriding folder, and just placing this file there ensures that it loads.