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

Question

When trying to add html editor to Ext.form.field.Picker, it is displayed but closed after mouse click

Demo https://fiddle.sencha.com/#fiddle/3aik

I use this control in grid cell editor, and override onFocusLeave didnt help in this case. The main problem is that the viewport inside the html editor is not part of the window. So far I have not come up with anything better than to make an override for Ext.ComponentManager onGlobalFocus function https://fiddle.sencha.com/#view/editor&fiddle/3ak0

hwsw hwsw · Accepted Answer · 2020-12-07T21:25:47

When you take a look in the code of this base component, you will find this method:

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

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

This method will call the collapse method which will hide the picker:

 /**
     * 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();
        }
    },

A simple hack could be to comment the function body of the onFocusLeave method out like here: https://fiddle.sencha.com/#fiddle/3ajo&view/editor

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

You can furthermore place some conditions there if this causes some side effects.

Another option could be to just use a normal field with a custom trigger which shows onclick this window you have defined here.

In response to your comment under this answer.

A picker field is not an editor field.

When you take a look in the Source of the CellEditor you will find this method again:

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);
    },

In that case you can define the editor field like that:

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

This will override the default config from 'completeEdit'.

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

Here is an updated fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3aoa

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

1 Answers