miniui setvalue 触发啥事件

Posted 2023-03-29

参考技术A 用onshowpopup事件可以实现在窗口显示时再加载数据 不过对于多次使用这种情况，确实还有问题，lookup中的textField与valueField对应的字段必须与grid的保存一致。这样的话，同一个页面上就无法多次使用了。

为啥 Ext.form.Field.setValue() 不触发事件？如何“修复”它？

【中文标题】为啥 Ext.form.Field.setValue() 不触发事件？如何“修复”它？

【英文标题】：Why does Ext.form.Field.setValue() not fire an event? How to "fix" it?为什么 Ext.form.Field.setValue() 不触发事件？如何“修复”它？

【发布时间】：2011-06-14 11:10:59

【问题描述】：

为什么 Ext.form.Field 的 setValue 没有触发事件来通知侦听器它的值已更改？我知道组合框有change 和select 事件，但这些仅在用户交互时触发事件，当另一个组件更改字段的值时呢？让我解释一下我面临的情况。

我目前正在开发一个可重用的字段集组件（我们称之为 ux.fieldset），其中包含一个组合框和另一个字段集。应根据组合框的选定值隐藏/显示内部字段集。 我在组合框上注册了一个侦听器，它侦听select 事件，当它触发时，只评估所选值并显示/隐藏内部字段集。

然后我将此 ux.fieldset 作为组件添加到我的一个表单中。

现在，当我在表单上执行 loadRecord() 时，我希望重新评估内部组合框的值，以便显示/隐藏组件的内部字段集。 执行此评估的代码显然应该在 ux.fieldset 中，因为它包含组合框并且因为它是可重用的，所以将它放在那里（DRY）是明智的。

是否有首选或更好的方法来处理这种情况？我在下面粘贴了我的 ux 代码，以防有人对我上面的解释感到困惑。

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     : 'd-m-Y'
            ,width      : this.datePickerWidth
        );

        this.date_unpublish = new Ext.form.DateField(
             fieldLabel : _('De-publiceer op')
            ,name       : 'unpublish_date'
            ,format     : 'd-m-Y'
            ,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);

---

更新：

我已经设法通过重载组合框实例上的 setValue 方法来解决这个问题。但如果你问我，这绝不是一个优雅或好的解决方案。

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

我想从 ExtJS 资深人士那里得到一些意见，他们将如何处理。

【问题讨论】：

扩展组合框以为此设置特殊侦听器？ （或者也许我误读了线程？重新阅读.. :)

我宁愿避免为这个琐碎的问题扩展 Combobox ... 看起来应该更容易修复而无需再次子类化

我提出了一个问题并得到了答复，我相信这也可以回答您的问题：'没有 UI 事件是由 JavaScript 触发的。这是为了防止在以编程方式与页面交互时出现无限循环和其他不良副作用。 ***.com/questions/4591625/…

是的，但是 setValue 不是 UI 事件，它是组件事件。也许“选择”或“改变”不会是此时触发的正确事件，但应该有一些东西可以听到值的变化。无论是“valuechanged”还是“valueset”……现在什么都没有了。

【参考方案1】：

是的，setValue 不会触发任何事件。我只能推测为什么。我可以告诉你，你正在使用 Combo 添加到 setValue 的任何功能，但你的工作是。

这样的东西会更安全。

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

还有一些代码可以“修复”setValue，因此它会触发一个事件。 我会设法找到它。 它为 setValue 添加了第二个参数。您可以使用Ext.override 覆盖Combo.prototype.setValue：http://code.extjs.com:8080/ext/ticket/185。

最后，我认为创建序列仍然是您最安全的选择。

【讨论】：

我已经尝试过 createInterceptor 但还没有尝试过 createSequence ...让我试一试！谢谢你的想法。

谢谢，这行得通...我也设法让它与 createInterceptor 一起工作...我忘记将值分配回组合框实例...非常感谢！

【参考方案2】：

使用覆盖类向组合框的setValue 方法添加更改事件相当容易：

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)
    

您只需要确保包含此代码的文件被应用程序加载。我仍在使用 Ext 5，所以我将它添加到项目的 Application.js 文件的 requires 数组中，但我相信 Ext 6 有一个覆盖文件夹，只需将这个文件放在那里即可确保它已加载。