Extjs HTML 编辑器在 Ext.form.field.Picker 中不起作用

Question

尝试将 html 编辑器添加到 Ext.form.field.Picker 时，显示但在单击鼠标后关闭

演示 https://fiddle.sencha.com/#fiddle/3aik

我在网格单元格编辑器中使用了这个控件，在这种情况下覆盖 onFocusLeave 没有帮助。主要问题是 html 编辑器中的视口不是 window 的一部分。到目前为止，我还没有想出比重写 Ext.ComponentManager onGlobalFocus 函数 https://fiddle.sencha.com/#view/editor&fiddle/3ak0

更好的办法

Answer 1

当你查看这个基础组件的代码时，你会发现这个方法：

onFocusLeave: function(e) {
  this.collapse();
  this.callParent([e]);
},

https://docs.sencha.com/extjs/6.5.3/classic/src/Picker.js.html

此方法将调用隐藏选取器的折叠方法：

 /**
     * Collapses this field's picker dropdown.
     */
    collapse: function() {
        var me = this;
        
        if (me.isExpanded && !me.destroyed && !me.destroying) {
            var openCls = me.openCls,
                picker = me.picker,
                aboveSfx = '-above';
 
            // hide the picker and set isExpanded flag
            picker.hide();
            me.isExpanded = false;
 
            // remove the openCls
            me.bodyEl.removeCls([openCls, openCls + aboveSfx]);
            picker.el.removeCls(picker.baseCls + aboveSfx);
            
            if (!me.ariaStaticRoles[me.ariaRole]) {
                me.ariaEl.dom.setAttribute('aria-expanded', false);
            }
 
            // remove event listeners
            me.touchListeners.destroy();
            me.scrollListeners.destroy();
            Ext.un('resize', me.alignPicker, me);
            me.fireEvent('collapse', me);
            me.onCollapse();
        }
    },

一个简单的 hack 可以像这里一样注释掉 onFocusLeave 方法的函数体：https://fiddle.sencha.com/#fiddle/3ajo&view/editor

onFocusLeave: function(e) {
        // this.collapse();
        //this.callParent([e]);
    },

如果这会导致一些副作用，您还可以在那里设置一些条件。

另一种选择是仅使用带有自定义触发器的普通字段，该触发器显示您在此处定义的 window。

回应你在这个答案下的评论。

选择器字段不是编辑器字段。

当您查看 CellEditor 的源代码时，您会再次发现此方法：

onFocusLeave: function(e) {
        var me = this,
            view = me.context.view,
            related = Ext.fly(e.relatedTarget);
 
        // Quit editing in whichever way.
        // The default is completeEdit.
        // If we received an ESC, this will be cancelEdit.
        if (me[me.focusLeaveAction]() === false) {
            e.event.stopEvent();
            return;
        }
 
        delete me.focusLeaveAction;
 
        // If the related target is not a cell, turn actionable mode off
        if (!view.destroyed && view.el.contains(related) &&
            (!related.isAncestor(e.target) || related === view.el) &&
            !related.up(view.getCellSelector(), view.el, true)) {
            me.context.grid.setActionableMode(false, view.actionPosition);
        }
 
        me.cacheElement();
        
        // Bypass Editor's onFocusLeave
        Ext.container.Container.prototype.onFocusLeave.apply(me, arguments);
    },

在这种情况下，您可以像这样定义编辑器字段：

 columns: [{
                xtype: 'gridcolumn',
                dataIndex: 'name',
                text: 'Name',
                flex: 1,
                editor: {
                    field: {xtype: 'edithtmlfield'},
                    focusLeaveAction: false
                }
            }],
            plugins: [{
                ptype: 'cellediting'
            }]

这将覆盖 'completeEdit' 的默认配置。

https://docs.sencha.com/extjs/6.5.3/classic/src/CellEditor.js.html

这是更新后的 fiddle：https://fiddle.sencha.com/#view/editor&fiddle/3aoa

Extjs HTML 编辑器在 Ext.form.field.Picker 中不起作用

Extjs HTML editor doesn't work in Ext.form.field.Picker

extjs

extjs7